How and why I added a circle following my mouse pointer

Follow me!

If you like this article, go ahead and follow me on Twitter:

Follow @getButterfly

I’ve seen this behaviour on several Russian sites and it looked really slick, especially when the movement was delayed compared to the mouse speed.

Implementing it is really easy using JavaScript and it does not slow down the page rendering or loading.

First of all, I added an empty element in the footer:

<div id="mouse-circle"></div>

And I have styled it:

/**
 * Radial cursor
 */
#mouse-circle {
    position: absolute;
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    border: 1px solid #0f1c64;
    border-radius: 50%;
    pointer-events: none;
}

If I wanted to avoid the CSS style, I would have opted for an SVG element. The amount of code would have been smaller.

Next, is the actual mouse follow behaviour, easily coded as below. Note I have used the requestAnimationFrame() function in order to give it a smooth, non-jerky effect.

document.addEventListener('DOMContentLoaded', () => {
    let mousePosX = 0,
        mousePosY = 0,
        mouseCircle = document.getElementById('mouse-circle');

    document.onmousemove = (e) => {
        mousePosX = e.pageX;
        mousePosY = e.pageY;
    }

    let delay = 6,
        revisedMousePosX = 0,
        revisedMousePosY = 0;

    function delayMouseFollow() {
        requestAnimationFrame(delayMouseFollow);

        revisedMousePosX += (mousePosX - revisedMousePosX) / delay;
        revisedMousePosY += (mousePosY - revisedMousePosY) / delay; 

        mouseCircle.style.top = revisedMousePosY + 'px';
        mouseCircle.style.left = revisedMousePosX + 'px';
    }
    delayMouseFollow();
});

You can see this mouse follow behaviour live on Codepen.

Possible Improvements

  • No CSS, just a basic SVG circle shape
  • No HTML, just a dynamic JavaScript node creation
  • Increased delay (12) for an even smoother effect
  • Fade out after mouse stops and fade in on mouse move – this is my favourite 😊
  • A second, transparent circle

And here’s a bonus, it marginally increases time on page, from an SEO point of view, as users tend to move the mouse around, just to see what it looks like.

Added by Ciprian on Thursday, August 27, 2020 in Blog

Contribute!

Contribute to this article by sharing your opinion on Twitter:

Unlimited Automated Page Speed Monitoring & Tracking.
Use SpeedFactor to track your website. It’s simple and reliable.
See how real people experience the speed of your website. Then find (and fix) your web performance problems.
Get Started
Privacy Policy