Estoy tratando de lograr un efecto en el que javascript detecte si el usuario ha dejado de desplazarse/pasar el mouse sobre la página y muestra lentamente un fragmento de texto sobre la página, algo así como un muro de pago. El efecto que estoy tratando de lograr es una versión simplificada de este sitio web donde cuando el usuario está inactivo por un cierto período de tiempo, los ojos comienzan a aparecer en la página.
Puede usar setTimeout y clearTimeout para realizar una acción cuando el mouse deja de moverse. Aquí volvería a aparecer el texto después de 3 segundos de inactividad
var timeout; var element = document.getElementById("element"); document.addEventListener("mousemove", function(e) { element.style.opacity = 0; clearTimeout(timeout); timeout = setTimeout(function() { element.style.opacity = 1; }, 2000); }); #element { transition: opacity 0.5s; opacity 0; } <div id="element">I see you<div>Primero, desea definir qué significa que un usuario esté "inactivo". Por ejemplo, podemos considerar que un usuario está inactivo si no ha movido el mouse o no se ha desplazado durante 30 segundos. Cuando eso sucede, queremos activar algún otro código para indicar que el usuario se ha vuelto inactivo.
const addUserInactiveListener = ( onUserInactive, inactiveTimeMs = 30000 ) => { let timeout = setTimeout(onUserInactive, inactiveTimeMs); const onUserAction = () => { clearTimeout(timeout); timeout = setTimeout(onUserInactive, inactiveTimeMs); } document.addEventListener('mousemove', onUserAction); document.addEventListener('scroll', onUserAction); } // console log after 5s of inactivity addUserInactiveListener(() => console.log('inactive'), 5000)