Recibí ayuda de un usuario aquí para agregar aceleración a un cursor personalizado que creé, pero estaba usando jQuery y el tipo que me ayudó me proporcionó una solución estándar de JS que funciona muy bien, pero ahora necesito eliminar la aceleración del cursor que se ha trabajado desde entonces.
let cursor = document.querySelector('#custom-cursor'); document.addEventListener('mousemove', evt => { document.body.classList.add('custom-cursor-moved') if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) { $('#custom-cursor').remove(); } else { cursor.style.display = 'block'; } let { clientX: x, clientY: y } = evt; let scale = 1; if (evt.target.matches('a,span,[onclick],img,video,i')) { cursor.classList.add('active'); scale = 0.5; } else { cursor.classList.remove('active'); } cursor.style.transform = `translate(${x}px, ${y}px) scale(${scale})`; }); * { cursor: none; } .custom-cursor-moved, .custom-cursor-moved * { cursor: none !important; } #custom-cursor { display: none; position: fixed; width: 20px; height: 20px; top: -10px; left: -10px; border: 2px solid black; border-radius: 50%; opacity: 1; background-color: #fb4d98; pointer-events: none; z-index: 99999999; transition: transform ease-out 0.15s, border 0.5s, opacity 0.5s, background-color 0.5s; } #custom-cursor.active { opacity: 0.5; background-color: #000; border: 2px solid #fb4d98; } <div id="custom-cursor"></div> <span>HOVER OVER ME</span>Para eliminar la aceleración del cambio x/y, debe eliminar la translate(x,y)
cursor.style.transform = `scale(${scale})`;luego puede agregar x/y directamente (no a través de la traducción)
cursor.style.top = `${y}px` cursor.style.left = `${x}px`Fragmento actualizado
let cursor = document.querySelector('#custom-cursor'); document.addEventListener('mousemove', evt => { document.body.classList.add('custom-cursor-moved') if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) { $('#custom-cursor').remove(); } else { cursor.style.display = 'block'; } let { clientX: x, clientY: y } = evt; let scale = 1; if (evt.target.matches('a,span,[onclick],img,video,i')) { cursor.classList.add('active'); scale = 0.5; } else { cursor.classList.remove('active'); } cursor.style.transform = `scale(${scale})`; cursor.style.top = `${y}px` cursor.style.left = `${x}px` }); #custom-cursor { display: none; position: fixed; width: 20px; height: 20px; top: -10px; left: -10px; border: 2px solid black; border-radius: 50%; opacity: 1; background-color: #fb4d98; pointer-events: none; z-index: 99999999; transition: transform ease-out 0.15s, border 0.5s, opacity 0.5s, background-color 0.5s; } #custom-cursor.active { opacity: 0.5; background-color: #000; border: 2px solid #fb4d98; } <div id="custom-cursor"></div> <span>HOVER OVER ME</span>La línea que causa el efecto de relajación es esta:
transition: transform ease-out 0.15s, border 0.5s, opacity 0.5s, background-color 0.5s;Así que simplemente eliminarlo debería hacer lo que quieras. Quizás estaba buscando una solución en el propio javascript si está acostumbrado a jQuery.
No es posible escribir css para afectar la transición del escalado pero no la posición. Si eso es lo que necesita, tendría que envolverlo en otro elemento.
<div id="cursor-position"><div id="custom-cursor"></div></div> #cursor-position { position: fixed; } let cursorPosition = document.querySelector("#cursor-position"); let cursor = document.querySelector("#custom-cursor"); // ... cursor.style.transform = `scale(${scale})`; cursorPosition.style.transform = `translate(${x}px, ${y}px)`;