← Alle Beiträge

Anleitungen

Animationen, Parallax und Autoplay abschalten — eine ruhigere Seite

15 Mai 2026 · von JustZix Team

Parallax, das bei jedem Scrollen ruckelt. Karussells, die sich von selbst bewegen. Video, das per Autoplay startet. Für manche Menschen ist das nur ein Ärgernis, für andere ein echtes Problem (Gleichgewichtsstörungen, Ermüdung). Eine Regel beruhigt die Bewegung auf einer Seite.

Drei Bewegungsquellen

• CSS-Animationen und -Übergänge — animation, transition.
• Sanftes Scrollen und Parallax — scroll-behavior plus in JS berechnete Effekte.
• Automatisch abspielendes Video — <video autoplay>.

CSS-Regel — Animationen und Scrollen

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

Wir verwenden absichtlich 0.01ms statt 0s: Die Animation „passiert" noch, also bekommt Seitencode, der auf das animationend-Event lauscht, es weiterhin und hängt nicht wartend fest. Fürs Auge ist die Bewegung weg.

JS-Regel — Video-Autoplay stoppen

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

Besser: das System-„weniger Bewegung" respektieren

Dein Betriebssystem hat eine „Animationen reduzieren"-Einstellung. Seiten sollten sie über prefers-reduced-motion lesen — aber viele tun es nicht. Wenn du diese Option in deinem System eingeschaltet hast, erzwingt diese Regel einfach, was die Seite zu respektieren versäumt hat.

Fallstricke

• Manche Animation trägt Bedeutung. Ein auf 0,01 ms zusammengeklappter Lade-Spinner verschwindet aus dem Blick — meist harmlos, aber sei dir bewusst.
• In JS berechnetes Parallax. Effekte, die einen Hintergrund per Skript beim Scrollen bewegen, überleben eine CSS-Regel. Dann hilft nur das Verstecken der Hintergrundebene.
• Autoplay kehrt nach SPA-Navigation zurück. Deshalb hält der MutationObserver Wache.

Siehe auch

• Beispiele — das Animationen-abschalten-Snippet
• Sticky-Elemente zähmen — eine weitere Regel für eine ruhigere Seite
• Dunkelmodus — visueller Komfort

Installiere JustZix — und surfe ohne tanzende Seite.