← Tous les articles

Tutoriels

Désactiver animations, parallaxe et lecture auto — une page plus calme

15 mai 2026 · par JustZix Team

Une parallaxe qui saccade à chaque défilement. Des carrousels qui bougent tout seuls. De la vidéo qui démarre en lecture automatique. Pour certains, c'est juste une nuisance, pour d'autres un vrai problème (troubles vestibulaires, fatigue). Une règle apaise le mouvement sur une page.

Trois sources de mouvement

• Animations et transitions CSS — animation, transition.
• Défilement fluide et parallaxe — scroll-behavior plus des effets calculés en JS.
• Vidéo en lecture automatique — <video autoplay>.

Règle CSS — animations et défilement

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

On utilise 0.01ms plutôt que 0s à dessein : l'animation « se produit » encore, donc le code de page qui écoute l'événement animationend le reçoit toujours et ne reste pas bloqué en attente. À l'œil, le mouvement a disparu.

Règle JS — arrêter la lecture auto des vidéos

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

Mieux : respecter le « réduire le mouvement » du système

Votre système d'exploitation a un réglage « réduire les animations ». Les pages devraient le lire via prefers-reduced-motion — mais beaucoup ne le font pas. Si vous avez activé cette option dans votre système, cette règle ne fait qu'imposer ce que la page a omis de respecter.

Pièges

• Une partie de l'animation porte du sens. Un spinner de chargement réduit à 0,01 ms disparaît de la vue — généralement sans danger, mais sachez-le.
• La parallaxe calculée en JS. Les effets qui déplacent un fond par script au défilement survivent à une règle CSS. Alors seul le masquage de la couche de fond aide.
• La lecture auto revient après une navigation SPA. C'est pourquoi le MutationObserver monte la garde.

À voir aussi

• Exemples — le snippet de désactivation des animations
• Maîtriser les éléments sticky — une autre règle pour une page plus calme
• Mode sombre — confort visuel

Installez JustZix — et naviguez sans que la page danse.