Custom Cursors For The Web: Enhance UX with CSS & JS

Custom Cursors For The Web: Enhance UX with CSS & JS

·

4 min read

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.

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">

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.

Code Pen