Sekcje wideo sterowane przewijaniem bez niszczenia wydajności

Strony premium uwielbiają przypiętą sekcję, w której wideo otwiera się przy przewijaniu, a podpisy zmieniają się rozdział po rozdziale. To też jeden z najłatwiejszych sposobów, by strona szarpała, była ciężka i zjadała baterię. Oto jak zbudowano sekcję prezentacji używaną w bibliotece demo, żeby pozostała szybka.

#Jedna wartość postępu steruje wszystkim

Sekcja to wysoki kontener z przyklejoną sceną w środku. Przy przewijaniu skrypt liczy jedną liczbę — jak daleko gość przewinął kontener, od 0 do 1 — a wszystko inne z niej wynika:

• wcięcie clip-path, które otwiera wideo w ramce do pełnej szerokości,
• delikatne skalowanie aktywnego wideo,
• który rozdział (klip i podpis) jest aktywny,
• szerokość paska postępu,
• zanikanie i dryf tytułu.

Wartości zapisywane są jako własne właściwości CSS, a resztę robi CSS. Nie ma osi czasu animacji dla każdego elementu do synchronizowania ani biblioteki animacji do pobrania.

const p = clamp(-rect.top / (rect.height - innerHeight));
stage.style.setProperty('--p', p);

#Odczyty i zapisy w jednej klatce

Zdarzenia przewijania pojawiają się częściej niż odświeżenie ekranu. Obsługa tylko planuje pracę przez requestAnimationFrame, a każda klatka najpierw czyta układ, potem zapisuje style. Mieszanie odczytów i zapisów wymusza wielokrotne przeliczanie układu — to najczęstsza przyczyna szarpania przewijania.

#Odtwarza się tylko jedno wideo

Trzy filmy odtwarzane naraz nagrzeją telefon i zjedzą dane. Zasady:

• Pierwszy klip ładuje się od razu, żeby sekcja nigdy nie była pusta.
• Pozostałe startują z preload="none".
• Gdy rozdział staje się aktywny, jego klip gra, a następny przechodzi na wstępne ładowanie.
• Nieaktywne klipy pauzują po zakończeniu zanikania.
• Gdy cała sekcja opuszcza ekran, wszystko się zatrzymuje.

Wszystkie klipy są wyciszone, zapętlone i playsinline, czego wymaga autoodtwarzanie w mobilnych przeglądarkach.

#Animuj tanie właściwości

opacity, transform i clip-path może składać GPU. Animowanie top, width czy background-position na dużych elementach wymusza przeliczanie układu lub przerysowanie. Pozioma galeria przesuwa się przez translate3d, a paralaksa karty przesuwa wewnętrzne zdjęcie transformacją zamiast zmieniać pozycję.

#Serwuj wideo rozsądnie

Klipy mają 720p i po kilka megabajtów, serwowane przez proxy na brzegu sieci, które je cache'uje i obsługuje zapytania zakresowe HTTP, by przeglądarka mogła przewijać i strumieniować. Plakaty pochodzą ze zdjęć, żeby coś sensownego pojawiło się przed zdekodowaniem pierwszej klatki.

#Szanuj ograniczenie ruchu

Gdy gość poprosił system o mniej ruchu, sekcja przestaje się przypinać, galeria staje się zwykłym przewijanym rzędem, a tekst pojawia się bez animacji. Treść jest identyczna; znika tylko choreografia.

#Broń swoich stylów

Ta sekcja trafia do wielu różnych szablonów, a jeden z nich miał ogólną regułę grid .gal, która po cichu zwinęła pas galerii. Teraz każda klasa komponentu ma prefiks. Jeśli budujesz komponenty wstawiane do stron, których nie kontrolujesz, przestrzenie nazw nie są opcjonalne.

#Podsumowanie

• Wyprowadzaj wszystko z jednej wartości postępu przewijania.
• Planuj przez requestAnimationFrame; czytaj, potem zapisuj.
• Jedno odtwarzane wideo; ładowanie w samą porę; pauza poza ekranem.
• Animuj tylko właściwości przyjazne kompozytorowi.
• Cache'uj i serwuj wideo zakresami na brzegu sieci.
• Respektuj prefers-reduced-motion.
• Nadawaj wstrzykiwanym stylom przestrzeń nazw.