← Todos los artículos

Tutoriales

Desactiva animaciones, parallax y autoplay — una página más tranquila

15 mayo 2026 · por JustZix Team

Un parallax que da tirones en cada scroll. Carruseles que se mueven solos. Un vídeo que arranca en autoplay. Para algunos es solo una molestia, para otros un problema real (trastornos vestibulares, fatiga). Una regla calma el movimiento en una página.

Tres fuentes de movimiento

• Animaciones y transiciones CSS — animation, transition.
• Scroll suave y parallax — scroll-behavior más efectos calculados en JS.
• Vídeos en reproducción automática — <video autoplay>.

Regla CSS — animaciones y scroll

*, *::before, *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}
html { scroll-behavior: auto !important; }

Usamos 0.01ms en lugar de 0s a propósito: la animación «ocurre» igualmente, así que el código de la página que escucha el evento animationend lo recibe de todos modos y no se queda bloqueado esperando. A la vista, el movimiento ha desaparecido.

Regla JS — detener el autoplay de los vídeos

function stopVideos() {
  document.querySelectorAll('video').forEach(v => {
    v.removeAttribute('autoplay');
    if (!v.paused) v.pause();
  });
}
stopVideos();
new MutationObserver(stopVideos)
  .observe(document.body, { childList: true, subtree: true });

Mejor: respetar el «reducir el movimiento» del sistema

Tu sistema operativo tiene un ajuste «reducir las animaciones». Las páginas deberían leerlo mediante prefers-reduced-motion — pero muchas no lo hacen. Si has activado esa opción en tu sistema, esta regla se limita a imponer lo que la página no respetó.

Trampas

• Parte de la animación lleva significado. Un spinner de carga reducido a 0,01 ms desaparece de la vista — normalmente inofensivo, pero tenlo presente.
• Parallax calculado en JS. Los efectos que desplazan un fondo vía script al hacer scroll sobreviven a una regla CSS. Entonces solo ayuda ocultar la capa de fondo.
• El autoplay vuelve tras la navegación SPA. Por eso el MutationObserver hace de guarda.

Mira también

• Ejemplos — el snippet para desactivar las animaciones
• Doma los elementos sticky — otra regla para una página más tranquila
• Modo oscuro — comodidad visual

Instala JustZix — y navega sin la página bailando.