Strona główna zaczyna się od zamykających się drzwi, przejścia do biurka, wtapiającej się podłogi i sufitu, tablicy, która wjeżdża na miejsce, wiszącego szyldu i wreszcie zegara ściennego, który zaczyna odmierzać sekundy – siedem beatów na stałym harmonogramie: drzwi w 0,5s, przejście w 0,75s, podłoga w 2s, sufit w 2,15s, tablica w 2,35s, szyld w 2,6s, zegar w 2,7s. Żaden fragment tej sekwencji nie jest sterowany przez JavaScript. Każdy beat to animacja CSS oparta na klatkach kluczowych z własnym animation-delay, a cała „choreografia” to nic innego niż siedem opóźnień dobranych tak, by wypaść we właściwej kolejności. W rogu jest mała okrągła strzałka, która po kliknięciu odtwarza wszystko od nowa, a ciekawe jest to, że jej kod w ogóle nie wie, że to wszystko jest prawdą.
Jedno wywołanie, nie siedem
Naiwny przycisk powtórki musiałby znać każdy element z animacją, restartować każdy z osobna i utrzymywać tę listę na bieżąco za każdym razem, gdy do wstępu dodawany jest nowy beat. Ten tak nie działa. Wywołuje hero.getAnimations({ subtree: true }) – API przeglądarki, które zwraca każdą działającą animację Web Animation gdziekolwiek wewnątrz elementu hero, niezależnie od tego, czym są – i dla każdej z nich wywołuje .cancel(), a potem .play(). To cała obsługa. Dodanie ósmego beatu do wstępu w przyszłości nie wymaga żadnych zmian w tej funkcji – przeglądarka po prostu zwróci przy następnym kliknięciu jedną animację więcej, bo funkcja nigdy ich nie liczyła.
Zanim cokolwiek z tego się wykona, kod sprawdza, czy hero.getAnimations w ogóle istnieje, a jeśli nie – ukrywa przycisk, zamiast podpinać obsługę kliknięcia. Przycisk, który jest widoczny, ale nic nie robi w starszej przeglądarce, jest gorszy niż brak przycisku – zachęca do kliknięcia, a potem po cichu nie dostarcza tego, co obiecał, co jest gorszą porażką niż niezaoferowanie funkcji w ogóle.
Te same siedem beatów nigdy nie trafia na małe ekrany
Poniżej 900 pikseli szerokości klasa przestaje być boczną dioramą i układa się pionowo, a wstęp, który się tam odtwarza, nie jest skróconą wersją tego z desktopa – to inna, krótsza sekwencja z mniejszą liczbą beatów: sufit w 0s, podłoga w 0,2s, tablica w 0,25s, nauczyciel w 0,65s, podpis w 1,05s. Drzwi, zegar ścienny i sam przycisk powtórki są na małych ekranach po prostu ukryte – szyld, który na desktopie wisi nad lekcją, na telefonie nie ma się na czym zawiesić, gdy tablica robi się pełnej szerokości, więc dzieli los drzwi i zegara, zamiast niezgrabnie się obcinać. Mobile nie dostaje szybszej wersji tego samego siedmiobeatowego pokazu. Dostaje pięciobeatowy pokaz zbudowany pod układ, w którym faktycznie działa.
Co się dzieje, gdy ruch jest wyłączony
Jedna globalna reguła sprowadza każdą animację i przejście na stronie do czasu trwania bliskiego zeru w chwili, gdy urządzenie odwiedzającego zgłasza prefers-reduced-motion: reduce. W przypadku wstępu oznacza to, że drzwi, przejście, podłoga, tablica, szyld i zegar nie rozgrywają się na skróconym harmonogramie – rozwiązują się do stanu końcowego praktycznie od razu, bo za pełną wersją sekwencji nie stoi żadna skrócona. To realny wybór projektowy z realnym kompromisem: część wytycznych dostępności zaleca zachowanie krótkiego, wciąż obecnego przejścia zamiast twardego cięcia, bo nagła zmiana sceny sama w sobie może wystraszyć. Wybraliśmy prostszą gwarancję – ustawienie ruchu respektowane w pełni, bez żadnego resztkowego ruchu, który ktoś musiałby jeszcze sprawdzać – zamiast częściowo zredukowanej wersji, która wymagałaby własnych testów, żeby potwierdzić, że rzeczywiście jest wystarczająco łagodna.
Czego wciąż nie jesteśmy pewni
Element.getAnimations() jest dziś szeroko wspierany przez przeglądarki, ale nie zawsze tak było, i dokładnie dlatego przycisk sprawdza jego istnienie i znika, zamiast zakładać, że jest dostępny – to pouczający drobny nawyk w takim samym stopniu, co funkcjonalny, ale oznacza to, że niewielka część odwiedzających na starych przeglądarkach nie widzi w ogóle przycisku powtórki, zamiast okrojonej wersji. Nie próbowaliśmy oszacować, ile to naprawdę osób, bo dla dekoracyjnego wstępu strony marketingowej uczciwa odpowiedź jest taka, że prawdopodobnie nie warto na to poświęcać czasu inżynierskiego.