Efekt parallax w czystym CSS: perspective i animacje sterowane przewijaniem
Zbuduj parallax z CSS perspective i translateZ albo z animacjami sterowanymi przewijaniem, zobacz obliczenia głębi na żywo i poprawnie obsłuż telefony oraz ograniczony ruch.
Parallax w czystym CSS ma dwie niezawodne metody. Metoda perspective tworzy kontener przewijania z perspective i odsuwa warstwy tła do tyłu przez translateZ, a następnie powiększa je o (perspective minus z) podzielone przez perspective. Nowsza metoda wiąże animację translate z animation-timeline: view(). Obie powinny się wyłączać przy prefers-reduced-motion.
Trzy sposoby na efekt parallax
Metoda
Jak się porusza
Na co uważać
perspective + translateZ
Głębsze warstwy przewijają się wolniej wewnątrz kontenera przewijania 3D
Wymaga własnego kontenera przewijania, nie strony
animation-timeline: view()
Przesunięcie z keyframes podąża za elementem przez viewport
Chrome i Edge 115+, Safari 26+, Firefox 161+
background-attachment: fixed
Tło stoi w miejscu, a treść przesuwa się nad nim
Częściowe wsparcie w iOS Safari; przycina się na wielu telefonach
Rozwiązanie zapasowe w JavaScript
Pozycja przewijania ustawia transform w każdej klatce
Użyj requestAnimationFrame i pasywnego listenera
Większość poradników o parallax kończy się na background-attachment: fixed, które iPhone obsługuje tylko częściowo. Ten poradnik pokazuje dwie metody, które naprawdę animują warstwy, wyjaśnia obliczenia skali, aby warstwy się nie kurczyły, i daje mały skrypt zapasowy oraz obsługę ograniczonego ruchu, dzięki której efekt nie przyprawi nikogo o mdłości.
Przesuń suwak głębi w edytorze, aby odsunąć warstwę tła dalej do tyłu.
Przewiń podgląd i porównaj, jak szybko porusza się tylna warstwa względem tekstu z przodu.
Odczytaj obliczoną skalę i prędkość, których używa CSS poniżej.
Skopiuj pasującą metodę: perspective dla zamkniętej sekcji hero, view() dla sekcji na zwykłej stronie.
Warstwa w translateZ(z) przy perspective p porusza się z prędkością p podzielone przez (p minus z) prędkości przewijania.
Ustaw overflow-x: hidden na kontenerze parallax, bo przeskalowane warstwy są szersze niż ich blok.
Deklaruj animation-timeline po skrócie animation, bo skrót resetuje go do auto.
Otocz ruch regułą @media (prefers-reduced-motion: no-preference), aby efekt był domyślnie opcjonalny.
Najczęściej zadawane pytania
Dlaczego moja warstwa z translateZ wygląda na mniejszą?
Odsunięcie elementu od widza ujemnym translateZ zmniejsza go, dokładnie jak odległy obiekt. Dodaj scale((p - z) / p), aby przywrócić jego rozmiar. Przy perspective: 1px i translateZ(-2px) to scale(3).
Czy background-attachment: fixed działa na telefonach?
Nie niezawodnie. caniuse podaje tylko częściowe wsparcie w iOS Safari i zaznacza, że większość urządzeń mobilnych wolno aktualizuje stałe tło po przewinięciu. Traktuj to jako dodatek tylko na komputery i użyj jednej z metod z transform, gdy efekt ma znaczenie.
Czy parallax szkodzi dostępności?
Duży ruch powiązany z przewijaniem może powodować zawroty głowy lub nudności u osób z zaburzeniami błędnika. Respektuj systemowe ustawienie ograniczenia ruchu przez media query prefers-reduced-motion i pokazuj warstwy statycznie, gdy jest włączone.
Które przeglądarki obsługują parallax sterowany przewijaniem?
Według stanu na październik 2026 caniuse podaje animation-timeline w Chrome i Edge od 115, Safari od 26 i Firefox od 161. Starsze przeglądarki po prostu pomijają animację, więc strona nadal czyta się poprawnie bez efektu.
Jak działa metoda perspective
Kontener staje się elementem przewijanym i dostaje wartość perspective. Jego dzieci zachowują pozycję 3D dzięki transform-style: preserve-3d. Gdy kontener się przewija, warstwa położona dalej w osi z pokonuje mniejszy dystans na ekranie niż warstwa w z równym zero, więc wydaje się zostawać w tyle.
Ponieważ perspective na elemencie tworzy też kontekst nakładania i blok zawierający dla dzieci z position fixed, trzymaj wrapper parallax jako samodzielną całość. Nagłówki, które muszą pozostać przyklejone do okna, powinny być poza nim.
Telefony i starsze przeglądarki
Opis wydajnego parallax przygotowany przez zespół Chrome zaznacza, że przewijanie z bezwładnością w iOS spłaszczało kiedyś kontekst 3D, co psuło sztuczkę z perspective na iPhone. Testuj na prawdziwym urządzeniu i dbaj, aby treść była czytelna, gdy warstwy się nie poruszają.
Metoda sterowana przewijaniem nie ma tego problemu, bo działa na zwykłym przewijaniu strony. Tam, gdzie nie jest obsługiwana, keyframes nigdy się nie uruchamiają, a warstwa zostaje w pozycji spoczynkowej, co jest czystym rozwiązaniem zapasowym.
Metoda 1: perspective i translateZ
Dwuwarstwowa sekcja hero we własnym kontenerze przewijania
Przewijaj wewnątrz ramki. Warstwa w paski jest w translateZ(-2px) i przeskalowana 3 razy, więc porusza się z jedną trzecią prędkości przewijania.
Metoda 2: sterowanie przewijaniem z view()
Obraz, który dryfuje, gdy jego sekcja przechodzi przez ekran
Animacja działa tylko tam, gdzie animation-timeline jest obsługiwane, a czytelnik nie prosił o ograniczenie ruchu.
Rozwiązanie zapasowe w JavaScript
Mały parallax z requestAnimationFrame
Używany tylko wtedy, gdy brakuje animacji sterowanych przewijaniem. Listener jest pasywny, a praca odbywa się raz na klatkę.
Edytor głębi
Głębia tylnej warstwy (translateZ): {n}px
Potrzebna skala: {v}
Prędkość tylnej warstwy: {v} przewijania
Podgląd parallax, przewijaj wewnątrz
Tekst z przodu porusza się z pełną prędkością
Przewijaj dalej, aby zobaczyć, jak tylna warstwa zostaje w tyle.
Twoje urządzenie prosi o ograniczenie ruchu, więc podgląd pozostaje nieruchomy.