← Tutti gli articoli

Tutorial

Disattiva animazioni, parallasse e autoplay — una pagina più calma

15 maggio 2026 · di JustZix Team

Una parallasse che scatta a ogni scroll. Caroselli che si muovono da soli. Video che parte in autoplay. Per alcuni è solo un fastidio, per altri un problema reale (disturbi vestibolari, affaticamento). Una regola placa il movimento su una pagina.

Tre fonti di movimento

• Animazioni e transizioni CSS — animation, transition.
• Scroll fluido e parallasse — scroll-behavior più effetti calcolati in JS.
• Video in riproduzione automatica — <video autoplay>.

Regola CSS — animazioni e scroll

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

Usiamo 0.01ms invece di 0s di proposito: l'animazione «accade» ancora, quindi il codice della pagina che ascolta l'evento animationend lo riceve comunque e non resta bloccato in attesa. All'occhio, il movimento è sparito.

Regola JS — fermare l'autoplay dei video

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 });

Meglio: rispettare il «riduci il movimento» di sistema

Il tuo sistema operativo ha un'impostazione «riduci le animazioni». Le pagine dovrebbero leggerla tramite prefers-reduced-motion — ma molte non lo fanno. Se hai attivato quell'opzione nel tuo sistema, questa regola si limita a imporre ciò che la pagina ha mancato di rispettare.

Trappole

• Parte dell'animazione porta significato. Uno spinner di caricamento ridotto a 0,01 ms sparisce dalla vista — di solito innocuo, ma tienilo presente.
• Parallasse calcolata in JS. Gli effetti che spostano uno sfondo via script allo scroll sopravvivono a una regola CSS. Allora aiuta solo nascondere il livello di sfondo.
• L'autoplay torna dopo la navigazione SPA. Per questo il MutationObserver fa la guardia.

Vedi anche

• Esempi — lo snippet per disattivare le animazioni
• Doma gli elementi sticky — un'altra regola per una pagina più calma
• Modalità scura — comfort visivo

Installa JustZix — e naviga senza la pagina che balla.