Skip to content

Instantly share code, notes, and snippets.

@davidbwaters
Created December 31, 2020 20:36
Show Gist options
  • Save davidbwaters/508a3c9e934da5b8c71e1bdaa48ed13b to your computer and use it in GitHub Desktop.
Save davidbwaters/508a3c9e934da5b8c71e1bdaa48ed13b to your computer and use it in GitHub Desktop.
Simple Radial Mouse Cursor
<h2>
Simple Radial Mouse Cursor
<br><small>25 lines of JavaScript</small>
</h2>
<div id="mouse-circle"></div>
if (window.matchMedia("(min-width: 768px)").matches) {
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();
}
/**
* Demo styles only
*/
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
h2 {
font-family: "Google Sans";
font-weight: 500;
text-align: center;
}
h2 small {
font-weight: 300;
}
/**
* End demo styles
*/
/**
* Simple Radial Mouse Cursor
*/
#mouse-circle {
position: absolute;
width: 64px;
height: 64px;
margin: -32px 0px 0px -32px;
border: 1px solid #000000;
border-radius: 50%;
pointer-events: none !important;
box-shadow: 0 0 16px rgba(255, 255, 255, 0);
}
<link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@100;200;300;400;500;700;900&amp;display=swap" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment