Animacja sterowana przewijaniem
Dwie sceny z szafą, zrobione dwiema technikami. Przewiń w dół — drzwi się otwierają; przewiń w górę — zamykają się tą samą drogą. Tak samo możemy pokazać na Twojej stronie produkt albo realizację.
Co to daje
Ruch na stronie idzie za przewijaniem: przewijasz w dół i drzwi szafy się otwierają, przewijasz w górę i zamykają się tą samą drogą. Tak pokazuje się produkt krok po kroku, jak na stronach Apple: mebel, który się otwiera, urządzenie, które się rozkłada, wnętrze, które zapala światło.
Dla firm, które pokazują produkt albo realizację: meble na wymiar, wnętrza, urządzenia, sprzęt.
Scena 1: sam CSS
Szafa narysowana w HTML i CSS. Obrót drzwi i światło we wnętrzu liczy przeglądarka z pozycji przewijania (animation-timeline) — bez ani jednej linii JavaScriptu. Przeglądarka bez tej funkcji albo z włączonym ograniczeniem ruchu od razu pokazuje szafę otwartą.
Scena 2: klatki na canvas
Technika znana ze stron Apple: 120 klatek WebP (razem ok. 0,7 MB; telefon pobiera co drugą) wygenerowanych z własnego rysunku SVG. Skrypt rysuje na płótnie klatkę odpowiadającą pozycji przewijania, a pliki dociąga dopiero, gdy scena zbliża się do okna. Bez JavaScriptu i przy ograniczonym ruchu widać obraz końcowy.
Ile kosztuje wydajności
Na tej stronie skrypt sceny z klatkami waży 1,1 kB (po kompresji), a 120 klatek WebP razem 731 KiB; telefon pobiera co drugą klatkę i dopiero wtedy, gdy scena zbliża się do ekranu. Układ strony nie przesuwa się podczas ładowania (CLS 0), a największym elementem na starcie (LCP) jest tekst nagłówka, nie animacja.
Nie musisz nam wierzyć na słowo: sprawdź tę stronę w PageSpeed, oficjalnym narzędziu Google. Jak to zrobić i jak czytać wynik, opisujemy w poradniku Jak sprawdzić szybkość strony.
Jak to zmierzyć
- PageSpeed Insights dla tej strony — telefon i komputer. Największy element (LCP) to tekst na górze strony, nie scena; przesunięcie układu (CLS) ma wynosić 0.
- Przewiń do końca i z powrotem do góry: obie sceny wracają do stanu początkowego tą samą drogą.
- Włącz w systemie ograniczenie ruchu: obie sceny stają w stanie końcowym, bez animacji.