Konfiguracja animacji powiązanych z przewijaniem
Uruchamianie animacji CSS, gdy elementy pojawiają się w obszarze widoku
Konfiguracja animacji powiązanych z przewijaniem to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.
Cel
Animacje powiązane z przewijaniem są odtwarzane, wstrzymywane lub odwracane na podstawie widoczności elementu. Przykłady: płynne pojawienie się sekcji hero po przewinięciu jej do widoku, licznik zwiększający wartość po wyświetleniu oraz efekt paralaksy powiązany z pozycją przewijania. IntersectionObserver wyzwala animacje, a CSS lub Web Animations API je wykonuje.
Animacje wyzwalane zdarzeniem
Najprostszy wzorzec polega na dodaniu klasy CSS zawierającej animację, gdy element pojawi się w obszarze widoku. W callbacku obserwatora użyj entry.target.classList.add("in-view"), a klasa zdefiniuje animation: fade-in 600ms forwards.
.fade-up { opacity: 0; transform: translateY(20px); }
.fade-up.in-view {
animation: fadeUp 600ms cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes fadeUp {
to { opacity: 1; transform: none; }
}Konfiguracja obserwatora
Utwórz współdzielony obserwator, obserwuj każdy element z klasą wyzwalającą, dodawaj „in-view” po wykryciu przecięcia i przestań obserwować element za pomocą unobserve, aby uniknąć ponownego wyzwalania. W przypadku animacji jednorazowych to wszystko, czego potrzeba; jeśli animacja ma się powtarzać po ponownym wejściu elementu do widoku, nie używaj unobserve i usuwaj klasę po opuszczeniu widoku.
const observer = new IntersectionObserver((entries) => {
for (const entry of entries) {
if (entry.isIntersecting) {
entry.target.classList.add("in-view");
observer.unobserve(entry.target);
}
}
}, { threshold: 0.2 });
document.querySelectorAll(".fade-up").forEach((el) => observer.observe(el));Efekty kaskadowe
Aby elementy listy pojawiały się kolejno, zastosuj opóźnienie dla każdego z nich za pomocą własności niestandardowej CSS: style="--delay: ${i * 100}ms" dla każdego elementu; animacja odczytuje animation-delay: var(--delay). Elementy są animowane kaskadowo, gdy lista pojawia się w widoku.
Próg wcześniejszego wyzwolenia
threshold: 0.2 wywołuje reakcję, gdy 20% elementu jest widoczne — zwykle jest to dobry moment na animacje „in-view”. threshold: 0 reaguje zbyt wcześnie (po pojawieniu się choćby jednego piksela), przez co efekt wygląda gwałtownie; threshold: 1 reaguje zbyt późno (dopiero po całkowitym wyświetleniu elementu), przez co animacja sprawia wrażenie opóźnionej.
Animacje powiązane z przewijaniem a wyzwalane przewijaniem
Animacje wyzwalane przewijaniem są odtwarzane raz po wykryciu przecięcia (jak opisano powyżej). Animacje powiązane z przewijaniem zmieniają postęp synchronicznie z pozycją przewijania. Nowoczesnym rozwiązaniem są sterowane przewijaniem animacje CSS (animation-timeline: scroll()), choć IntersectionObserver nadal sprawdza się przy wykrywaniu wejścia do stref wyzwalania i wyjścia z nich.
Unikanie nadmiernych przeliczeń układu
Animuj właściwości, które GPU może wydajnie przetwarzać: transform i opacity. Unikaj animowania top, left, width i height — wywołują one przeliczanie układu w każdej klatce, przez co animacje powiązane z przewijaniem zacinają się na urządzeniach ze średniej półki.
Respektowanie ograniczenia ruchu
Umieszczaj deklaracje animacji w @media (prefers-reduced-motion: no-preference), aby użytkownicy proszący o ograniczenie ruchu (na przykład z powodu zaburzeń przedsionkowych lub nadwrażliwości) otrzymywali statyczny stan końcowy bez ruchu. Animacje dekoracyjne należy całkowicie wyłączać przy ograniczeniu ruchu.
.fade-up { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
.fade-up { opacity: 0; transform: translateY(20px); }
.fade-up.in-view { animation: fadeUp 600ms forwards; }
}Wzorzec wydajności
Używaj jednego współdzielonego obserwatora, a nie osobnego dla każdego elementu. Po uruchomieniu animacji jednorazowej użyj unobserve. Używaj will-change oszczędnie — tylko dla elementów, które są aktualnie animowane, i usuwaj tę właściwość po zakończeniu animacji. Obserwuj panel Performance pod kątem pomijanych klatek.
Animacje dwukierunkowe
Jeśli animacja ma się odwracać po opuszczeniu przez element obszaru widoku, nie używaj unobserve. W callbacku przełączaj klasę na podstawie isIntersecting: entry.target.classList.toggle("in-view", entry.isIntersecting). Animacja jest odtwarzana do przodu po wejściu elementu do widoku i odwracana po jego opuszczeniu.
Łączenie z Web Animations API
W przypadku animacji sterowanych przez JavaScript zastąp classList.add wywołaniem entry.target.animate(keyframes, options). WAAPI zwraca obiekt Animation, który można wstrzymywać, odwracać lub łączyć w łańcuchy za pomocą promises — rozwiązanie to jest bardziej elastyczne niż CSS w przypadku złożonych sekwencji.
Sprawdzenie wiedzy
Dlaczego w animacjach powiązanych z przewijaniem zaleca się animowanie transform i opacity zamiast top, left, width i height?
Podsumowanie
Animacje powiązane z przewijaniem łączą IntersectionObserver z klasami animacji CSS lub WAAPI. Ustaw stan ukryty, dodawaj „in-view” po wykryciu przecięcia, animuj transform i opacity (nie top ani left), respektuj prefers-reduced-motion, a do kaskadowego pojawiania się elementów stosuj własności niestandardowe CSS. W przypadku animacji opartych na pełnym postępie przewijania rozważ natywne animacje sterowane przewijaniem (animation-timeline: scroll()).
Często zadawane pytania
Czy lekcja „Konfiguracja animacji powiązanych z przewijaniem” jest bezpłatna?
Tak — pełny tekst „Konfiguracja animacji powiązanych z przewijaniem” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Konfiguracja animacji powiązanych z przewijaniem”?
Uruchamianie animacji CSS, gdy elementy pojawiają się w obszarze widoku Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć HTML Academy?
Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Konfiguracja animacji powiązanych z przewijaniem”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?
Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- IntersectionObserver API i progi
- Leniwe ładowanie za pomocą IntersectionObserver
- Implementacja nieskończonego przewijania
- Konfiguracja animacji powiązanych z przewijaniem