Skip to content

Instantly share code, notes, and snippets.

@bittu
Created October 25, 2019 16:54
Show Gist options
  • Save bittu/7ae6ec79936e030e081abb1d1fe42c5d to your computer and use it in GitHub Desktop.
Save bittu/7ae6ec79936e030e081abb1d1fe42c5d to your computer and use it in GitHub Desktop.
Custom mouse move cursor (test link: https://output.jsbin.com/folosavuqa)
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Custom mouse move cursor">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Custom mouse move cursor</title>
<style>
.cursor {
position: absolute;
top: 0;
left: 0;
width: 25px;
height: 25px;
border-radius: 50%;
border: 1px solid black;
pointer-events: none;
z-index: 9999;
}
</style>
</head>
<body>
<div class="cursor"></div>
<a href="#">Link</a>
<script>
const cursor = document.querySelector('.cursor')
const links = document.querySelectorAll('a')
let mousePos = {x: 12.5, y: 12.5}
let lastMousePos = {x: 12.5, y: 12.5}
let scale = 1
let lastScale = 1
function lerp(v0, v1, t) {
return (1 - t) * v0 + t * v1
}
function transformCursor() {
lastMousePos.x = lerp(lastMousePos.x, mousePos.x - 12.5, .15)
lastMousePos.y = lerp(lastMousePos.y, mousePos.y - 12.5, .15)
lastScale = lerp(lastScale, scale, .5)
cursor.style.transform = `translateX(${lastMousePos.x}px) translateY(${lastMousePos.y}px) scale(${lastScale})`
requestAnimationFrame(transformCursor)
}
[...links].forEach((link) => {
link.addEventListener('mouseenter', e => scale = 1.5)
link.addEventListener('mouseleave', e => scale = 1)
})
document.addEventListener('mousemove', function(e) {
const { x, y } = e
mousePos.x = x
mousePos.y = y
})
document.addEventListener('mousedown', function(e) {
scale = .5
})
document.addEventListener('mouseup', function(e) {
scale = 1
})
transformCursor()
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment