Estoy tratando de lograr un efecto visual con JavaScript y CSS para desvanecer un simple cursor personalizado cuando no se mueve. Ni siquiera sé si tal efecto es posible, pero creo que a través de Keyframes o JavaScript puede ser posible con un poco de ayuda.
Esto es lo que tengo hasta ahora:
var cursor = document.getElementById("cursor"); document.body.addEventListener("mousemove", function(e) { cursor.style.left = e.clientX + "px", cursor.style.top = e.clientY + "px"; }); * { padding: 0; margin: 0; border: 0; } html, body { width: 100%; height: 100%; min-height: 100%; background: #e8e8e8; cursor: none; } .inactive-fade-out { transition: fadeout 150ms ease-out; } @keyframes fadeout { from { opacity: 1; } to { opacity: 0.1; } } #cursor { position: fixed; border-radius: 50%; transform: translateX(-50%) translateY(-50%); left: -100px; top: 50%; background-color: black; height: 8px; width: 8px; transition: all 150ms ease-out; } <div id="cursor" class="inactive-fade-out"></div>CSS o JavaScriptjQuery¡Su ayuda es muy apreciada!
Puede usar clearTimeout y setTimeout para esto
var timeout; var cursor = document.getElementById("cursor"); document.body.addEventListener("mousemove", function(e) { cursor.style.left = e.clientX + "px", cursor.style.top = e.clientY + "px"; cursor.style.opacity = 1; clearTimeout(timeout); timeout = setTimeout(function() { cursor.style.opacity = 0; }, 500); }); * { padding: 0; margin: 0; border: 0; } html, body { width: 100%; height: 100%; min-height: 100%; background: #e8e8e8; cursor: none; } .inactive-fade-out { transition: fadeout 150ms ease-out; } @keyframes fadeout { from { opacity: 1; } to { opacity: 0.1; } } #cursor { position: fixed; border-radius: 50%; transform: translateX(-50%) translateY(-50%); left: -100px; top: 50%; background-color: black; height: 8px; width: 8px; transition: all 150ms ease-out; } <div id="cursor" class="inactive-fade-out"></div>La forma en que lo hice es:
Cada vez que se mueve el mouse, se establece una variable con una marca de tiempo de cuando se movió el mouse. Un bucle monitorea esta marca de tiempo y verifica si han pasado más de 500 ms desde que se movió el cursor y lo oculta. De lo contrario, lo muestra.
Aquí está el fragmento
var cursor = document.getElementById("cursor"); var last_move_timestamp = Date.now(); var loop = setInterval(function() { if (Date.now() - last_move_timestamp > 500) { document.getElementById('cursor').style.opacity = 0; } else { document.getElementById('cursor').style.opacity = 1; } }, 10); document.body.addEventListener("mousemove", function(e) { last_move_timestamp = Date.now(); cursor.style.left = e.clientX + "px", cursor.style.top = e.clientY + "px"; }); * { padding: 0; margin: 0; border: 0; } html, body { width: 100%; height: 100%; min-height: 100%; background: #e8e8e8; cursor: none; } .inactive-fade-out { transition: opacity 150ms ease-out; } #cursor { position: fixed; border-radius: 50%; transform: translateX(-50%) translateY(-50%); left: -100px; top: 50%; background-color: black; height: 8px; width: 8px; transition: all 150ms ease-out; } <div id="cursor" class="inactive-fade-out"></div>