//HTML <div class="cursors"> <div></div> </div> //CSS style the element /* Style the cursor */ .cursors div { position: absolute; top: 0; left: 0; width: 25px; height: 25px; background: url('imgs/home/bub.svg') no-repeat center/ cover; border-radius: 50%; z-index: 10000; /* Prevent from getting in the way when links are clicked */ pointer-events: none; /* Move the ball to the center of the cursor */ transform: translate(-50%, -50%); opacity: 1; transition: opacity 0.3s; } //Javascript // CURSOR const cursor = document.querySelector('.cursors'); const circle = cursor.querySelector('div'); const elementsWitoutCursor = document.querySelectorAll('.hide-cursor'); //Animate cursor let aimX = 0; let aimY = 0; let currentX = 0; let currentY = 0; let speed = 0.2; const animate = () => { currentX += (aimX - currentX) * speed; currentY += (aimY - currentY) * speed; circle.style.left = currentX + 'px'; circle.style.top = currentY + 'px'; requestAnimationFrame(animate); }; animate(); document.addEventListener('mousemove', (event) => { aimX = event.pageX; aimY = event.pageY; }); //hide the cursor when hovering over elements with a specific class elementsWitoutCursor.forEach((element) => { element.addEventListener('mouseover', () => { circle.classList.add('invisible'); }); element.addEventListener('mouseout', () => { circle.classList.remove('invisible'); }); });
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter