← Wszystkie wpisy

Poradniki

Wyłącz animacje, parallax i autoplay — spokojniejsza strona

15 maja 2026 · autor JustZix Team

Parallax, który szarpie przy każdym scrollu. Karuzele ruszające się same. Wideo startujące z autoplay. Dla części osób to tylko irytacja, dla części — realny problem (zaburzenia przedsionkowe, męczliwość). Jedna reguła wycisza ruch na stronie.

Trzy źródła ruchu

• Animacje i przejścia CSS — animation, transition.
• Płynny scroll i parallax — scroll-behavior plus efekty liczone w JS.
• Autoodtwarzane wideo — <video autoplay>.

Reguła CSS — animacje i scroll

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

Używamy 0.01ms zamiast 0s celowo: animacja nadal „się dzieje", więc kod strony nasłuchujący zdarzenia animationend dostanie je i nie zawiesi się, czekając. Z punktu widzenia oka ruch znika.

Reguła JS — zatrzymaj autoplay wideo

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

Lepiej: respektuj systemowy „mniej ruchu"

System operacyjny ma ustawienie „ogranicz animacje". Strony powinny je czytać przez prefers-reduced-motion — ale wiele tego nie robi. Jeśli włączyłeś tę opcję w systemie, ta reguła po prostu egzekwuje to, czego strona nie uszanowała.

Pułapki

• Część animacji niesie znaczenie. Spinner ładowania zwinięty do 0,01 ms zniknie z oczu — zwykle nieszkodliwe, ale wiedz o tym.
• Parallax liczony w JS. Efekty przesuwające tło skryptem przy scrollu przetrwają regułę CSS. Wtedy pomaga dopiero ukrycie warstwy tła.
• Autoplay wróci po nawigacji w SPA. Dlatego pilnuje tego MutationObserver.

Zobacz też

• Przykłady — snippet wyłączania animacji
• Ujarzmij sticky elementy — kolejna reguła na spokojniejszą stronę
• Tryb ciemny — komfort wizualny

Zainstaluj JustZix — i przeglądaj bez tańczącej strony.