Odsłanianie przy przewijaniu, pasek postępu czytania, parallax i sticky story, każdy zbudowany na trzy sposoby: CSS scroll-driven animations, IntersectionObserver i GSAP ScrollTrigger.
Animacje przy przewijaniu odtwarzają efekty, gdy treść pojawia się w widoku lub gdy strona jest przewijana. Nowoczesny CSS łączy keyframes z przewijaniem za pomocą animation-timeline: view() lub scroll(), bez skryptu tam, gdzie jest to obsługiwane. IntersectionObserver w JavaScript wszędzie uruchamia klasy odsłaniające, a GSAP ScrollTrigger obsługuje przypinanie i osie czasu sterowane przewijaniem. Zawsze respektuj prefers-reduced-motion.
Wybierz podejście
Cztery efekty, o które ludzie pytają najczęściej, czyli odsłanianie przy przewijaniu, pasek postępu czytania, parallax i sticky story, pokazujemy w czystym CSS, w zwykłym JavaScript z IntersectionObserver oraz w GSAP ScrollTrigger. Wersje CSS działają na żywo w przewijanych ramkach, a wersja z observerem działa jako działające demo bezpośrednio na tej stronie.
Wiąże postęp animacji z przewijaniem zamiast z czasem. scroll() śledzi, jak daleko przewinięto kontener, od góry do dołu. view() śledzi drogę jednego elementu przez widoczny obszar, więc keyframes wykonują się, gdy element wchodzi i wychodzi.
Chrome i Edge od wersji 115 oraz Safari od wersji 26. W Firefoksie funkcja była ukryta za preferencją, a nie włączona domyślnie, więc przed poleganiem na niej sprawdź caniuse i zawsze zapewnij fallback.
Do sprawdzania, kiedy element wchodzi do widoku lub z niego wychodzi, tak. Przeglądarka oblicza przecięcia asynchronicznie i wywołuje Twój kod tylko przy zmianach, a listener scroll uruchamia się wiele razy na sekundę i kusi do odczytów layoutu, które powodują przycinanie.
Nie do prostych odsłonięć ani paska postępu. GSAP ScrollTrigger jest wart swojego miejsca przy przypiętych sekcjach, wieloetapowych osiach czasu sterowanych przewijaniem, przyciąganiu i efektach, które już dziś muszą działać tak samo w każdej przeglądarce.
Wewnątrz media query prefers-reduced-motion: reduce pokaż treść w stanie końcowym i zrezygnuj z parallaxy oraz dużych ruchów. W JavaScript przed utworzeniem animacji sprawdź to samo zapytanie przez window.matchMedia. Delikatne zanikanie opacity jest zwykle akceptowalne.
Każda ramka przewija się niezależnie. W przeglądarce bez animation-timeline osłona @supports zostawia wszystko widoczne i nieruchome.
Każda karta pojawia się i unosi, gdy wchodzi do viewportu. animation-range ogranicza efekt do fazy wejścia.
scroll(root) śledzi przewijanie dokumentu. Pasek skaluje się od 0 do pełnej szerokości bez żadnego listenera.
Wewnętrzna warstwa przesuwa się wolniej niż strona, gdy jej kontener przechodzi przez viewport. Wyłączona przy reduced motion.
Obraz pozostaje przypięty dzięki position: sticky, a każdy krok rozjaśnia się, gdy przechodzi przez środek ramki.
Demo na żywo u góry tej strony uruchamia ten sam wzorzec w React. Te wersje działają w dowolnym frameworku lub bez żadnego.
Karty są ukryte dopiero wtedy, gdy skrypt się wykonał, bo najpierw dodaje on klasę do html, więc nieudany skrypt zostawia je widoczne.
Postęp wymaga dokładnej pozycji przewijania, więc ten przykład używa pasywnego listenera scroll z throttlingiem do jednej klatki.
Cienki pas obserwacji na środku ekranu oznacza jako aktywny ten krok, który akurat przez niego przechodzi.
Tylko kod. ScrollTrigger to wtyczka GSAP; obie są darmowe w użyciu na podstawie własnej licencji GSAP, którą warto przeczytać przed wdrożeniem.
gsap.matchMedia uruchamia konfigurację tylko wtedy, gdy czytelnik nie poprosił o ograniczenie ruchu, i cofa ją, jeśli ustawienie się zmieni.
Przewijaj wewnątrz ramki. Karty odsłaniają się raz, pasek śledzi postęp, warstwa w paski przesuwa się wolniej niż treść, a przypięty panel podąża za krokiem przechodzącym przez środek.
Ograniczenie ruchu jest włączone, więc karty pojawiają się bez ruchu, a parallax jest wyłączony.
Postęp przewijania w demie
Przewijany obszar demo
Zacznij przewijać.
Warstwa parallax
Zacznij za darmo · Bez karty kredytowej