Created
October 25, 2019 16:54
-
-
Save bittu/7ae6ec79936e030e081abb1d1fe42c5d to your computer and use it in GitHub Desktop.
Custom mouse move cursor (test link: https://output.jsbin.com/folosavuqa)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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