How and why I added a circle following my mouse pointer

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 Roo.ie.

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

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

Related Articles

Privacy Policy