Kinowa prezentacja sterowana przewijaniem
Sekcja wielokrotnego użytku, która zamienia każdy przykład w krótki film: przy przewijaniu wideo rozszerza się z okienka na cały ekran, a potem pojawia się galeria.
Cel techniczny
Dać każdemu demo wrażenie strony od agencji — prawdziwe nagrania, pewna typografia i ruch — przy jednym skrypcie bez zależności, działającym na telefonach.
Ograniczenia
- Bez bibliotek animacji: jeden mały skrypt na sekcję.
- W danej chwili dekodowane jest tylko jedno wideo, by oszczędzać baterię i dane.
- Musi respektować ograniczenie ruchu i przechodzić w statyczny układ.
Architektura
- 01
Przypięta prezentacja
Wysoka sekcja z przyklejoną sceną; postęp przewijania steruje clip-path, skalą i rozdziałem.
- 02
Rozdziały
Do trzech klipów przenika się z podpisami; odtwarzany jest tylko aktywny.
- 03
Przypięta galeria
Poziomy pas przesuwany przewijaniem z paralaksą każdej karty.
- 04
Najpierw własne zdjęcia
Gdy znane są zdjęcia firmy, otwierają galerię.
Przepływ biegnie od lewej do prawej, z góry na dół.
Kluczowe decyzje
Nagrania zamiast 3D z kodu
Wcześniejszy pokój 3D z kodu wyglądał syntetycznie. Licencjonowane nagrania od razu sprawiły, że ta sama sekcja wygląda prawdziwie.
Style z prefiksem
Sekcja trafia do wielu różnych szablonów, więc każda klasa ma prefiks, by nie kolidować z CSS szablonu — lekcja z prawdziwego błędu układu.
Wstępne ładowanie tylko następnego klipu
Pierwszy klip ładuje się od razu; każdy kolejny przechodzi z preload='none' tuż przed potrzebą.
Zrzuty ekranu
Wyzwania
Kolizje CSS
Ogólna nazwa klasy w galerii zderzyła się z regułą grid szablonu i zwinęła pas. Prefiks na każdym selektorze naprawił to na stałe.
Nakładanie na telefonie
Końcowe wezwanie do działania nachodziło na przyklejony pasek mobilny; na małych ekranach jest teraz ukryte na rzecz paska.
Wnioski
- Ruch powiązany z przewijaniem powinien zależeć od jednej wartości postępu; reszta z niej wynika.
- Wstrzykiwane komponenty muszą bronić własnych stylów.
- Prawdziwe nagrania i umiar wygrywają z wymyślną generowaną grafiką.