In the world of web design, it's the small details that make a big difference. Customizing the cursor and adding a follower animation can significantly boost the interactivity and visual appeal of your website. This blog post will guide you through adding a custom cursor along with a follower effect using CSS and JavaScript.
Adding a Basic Custom Cursor
Step 1: HTML Setup
Start by adding two div elements in your HTML, one for the cursor and another for the cursor follower:
<div class="cursor default-cursor" id="cursor"></div>
<div class="cursor-follower default-cursor-follower" id="cursor-follower"></div>
These elements will serve as our custom cursor and its follower.
Step 2: CSS Styling
Next, style both the cursor and the follower in CSS:
.cursor, .cursor-follower {
border-radius: 50%;
position: fixed;
transform: translate(-50%, -50%);
pointer-events: none;
}
.default-cursor {
width: 8px;
height: 8px;
background-color: var(--accent-color);
z-index: 9999;
}
.default-cursor-follower {
width: 36px;
height: 36px;
background-color: var(--accent-color);
opacity: 0.2;
z-index: 999;
}
Step 3: JavaScript Interactivity
After setting up the HTML and CSS for the custom cursor and its follower, we need to add an animate function in JavaScript. This function will create a smooth following motion for the cursor follower, enhancing the interactive experience.
let cursorFollower = document.getElementById("cursor-follower");
let cursor = { x: 0, y: 0 };
let follower = { x: 0, y: 0, vx: 0, vy: 0 };
const stiffness = 0.07; // Spring stiffness
const damping = 0.1; // Damping coefficient
function animate() {
// Calculate spring force
let dx = cursor.x - follower.x;
let dy = cursor.y - follower.y;
let springForceX = dx * stiffness;
let springForceY = dy * stiffness;
// Damping
follower.vx *= damping;
follower.vy *= damping;
// Apply forces to velocity
follower.vx += springForceX;
follower.vy += springForceY;
// Update position
follower.x += follower.vx;
follower.y += follower.vy;
// Apply position to the DOM element
cursorFollower.style.left = follower.x + "px";
cursorFollower.style.top = follower.y + "px";
requestAnimationFrame(animate);
}
animate();
Use JavaScript to make the custom cursor track the mouse movement:
document.addEventListener("mousemove", function (e) {
cursor.x = e.clientX;
cursor.y = e.clientY;
var cursor_el = document.getElementById("cursor");
cursor_el.style.left = e.clientX + "px";
cursor_el.style.top = e.clientY + "px";
});
This script enables the cursor and follower to follow the mouse movements on the screen.
Hover Animation with Different Links and Font Awesome Icons
Enhance your cursor's interactivity with hover animations over links by incorporating Font Awesome icons.
Step 1: Include Font Awesome
First, ensure you've included Font Awesome in your HTML. Here, we use version 4:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Step 2: HTML Link Setup with Font Awesome Icons
Modify your HTML links to include data- attributes that reference specific Font Awesome icons. It's important to use the correct icon name as per Font Awesome version 4:
<a href="#" data-cursor="link" data-cursoricon="twitter">Twitter</a>
In this example, data-cursoricon="twitter" will correspond to the Twitter icon in Font Awesome v4.
Step 3: Find Correct Icon Names
To ensure you are using the correct icon names from Font Awesome version 4, visit their website and search for icons. The icon name should exactly match the value in the data-cursoricon attribute. Font Awesome v4 Icons.
Step 4: CSS for Hover State
Add CSS for the hover state of the cursor. When hovering over a link, the cursor will change its appearance and include the Font Awesome icon:
.link-cursor {
width: 32px;
height: 32px;
background-color: var(--secondary-color);
z-index: 9999;
color: var(--primary-color);
}
.link-cursor-follower {
width: 52px;
height: 52px;
background-color: var(--secondary-color);
opacity: 1;
}
.link-cursor i {
display: block;
font-size: 1.2rem;
}
Step 5: JavaScript for Dynamic Hover Effects
Use JavaScript to change the cursor's appearance based on the hovered link. The cursor will dynamically display the corresponding Font Awesome icon:
document.addEventListener("mousemove", function (e) {
cursor.x = e.clientX;
cursor.y = e.clientY;
var cursor_el = document.getElementById("cursor");
cursor_el.style.left = e.clientX + "px";
cursor_el.style.top = e.clientY + "px";
if (e.target.dataset.cursor == "link") {
cursor_el.classList.add("link-cursor");
cursor_el.classList.remove("default-cursor");
follower_el.classList.add("link-cursor-follower");
cursorFollower.classList.remove("default-cursor-follower");
cursor_el.innerHTML = `<i class="fa fa-${e.target.dataset.cursoricon}"></i>`;
} else {
cursor_el.classList.add("default-cursor");
cursor_el.classList.remove("link-cursor");
cursorFollower.classList.add("default-cursor-follower");
follower_el.classList.remove("link-cursor-follower");
cursor_el.innerHTML = "";
}
});
With these steps, your website's cursor will not only follow the mouse but also change its appearance based on the hovered link, along with a follower enhancing the visual effect.
Conclusion
Custom cursor animations and follower effects offer a unique and creative way to boost user engagement on your website. By following the steps outlined above, you not only add these dynamic features but also open up a world of customization. Feel free to experiment and tweak the existing CSS and JavaScript to truly make these animations and effects your own. Whether it's adjusting the animation speed, changing colors, or experimenting with different shapes and sizes, the possibilities are endless. Dive in and give your site a personalized touch that reflects your style.