Vespera, strona z filmem sterowanym przewijaniem

VESPERA nie istnieje. To jednostka koncepcyjna, czterdzieści dwa metry, które nie odwzorowują żadnego jachtu, żadnej stoczni ani marki. Zbudowaliśmy ją po to, żeby na projekcie bez klienta i bez terminu sprawdzić jedną rzecz: czy da się zrobić stronę, na której przewijanie nie animuje elementów, tylko przesuwa film po jego własnej osi czasu, i czy taka strona nadal będzie się otwierać szybko.

Przewijanie steruje czasem filmu, nie odtwarzaniem

Film ma osiem ujęć i trzydzieści sześć i pół sekundy. Nie odtwarza się sam. Pozycja przewijania wyznacza moment, w którym film ma być, a przeglądarka do tego momentu dojeżdża. Cała sztuczka polega na tym, gdzie ten skok wykonać. Pierwsza, oczywista wersja ustawiała czas filmu wprost w reakcji na zdarzenie przewijania i kleiła się nie do zniesienia. Zdarzenie przewijania odpala się znacznie częściej, niż dekoder wideo potrafi przeskoczyć, więc kolejka poleceń rośnie szybciej, niż jest obsługiwana. Wersja, która działa, zapamiętuje tylko wartość docelową, a sam skok wykonuje raz na klatkę, w pętli animacji, i wygładza go po drodze.

Plik wideo trzeba przygotować pod przewijanie, nie pod oglądanie

To jest część, której nie widać, i o którą najłatwiej się potknąć przy kolejnej edycji. Typowy plik ma klatkę kluczową co około dwie sekundy. Przy takim odstępie skok w dowolny punkt wymaga zdekodowania nawet kilkudziesięciu klatek pośrednich, zanim pokaże się właściwy obraz. Przy zwykłym odtwarzaniu to bez znaczenia, przy przewijaniu strona zamiera. Nasz plik ma klatkę kluczową co szóstą klatkę. Jest przez to cięższy, ale skacze natychmiast. Gdyby kiedyś okazał się za duży, trzeba podnieść kompresję, a nie wydłużać odstęp między klatkami kluczowymi.

Jedna wyspa Reacta w całym dokumencie

Strona stoi na Astro i generuje się do statycznego HTML. React jest dokładnie w jednym miejscu, w galerii, bo jej trójwymiarowe pochylenie na sprężynach faktycznie potrzebuje biblioteki animacji, a sama galeria leży poniżej pierwszego ekranu i ładuje się dopiero wtedy, gdy wjedzie w kadr. Sekcja z filmem, czyli ta, od której zależy szybkość otwarcia strony, jest zwykłym skryptem. Gdyby była wyspą Reacta, przed najważniejszym elementem strony trzeba by pobrać i uruchomić kilkadziesiąt kilobajtów biblioteki, żeby dostać dwa odwołania do elementów i pętlę animacji.

Efekty pojawiania się muszą zawodzić na widoczne

Sekcje wjeżdżają miękko przy pierwszym pokazaniu. Pierwsza wersja używała nowego mechanizmu CSS, który wiąże animację z pozycją przewijania. Test wsparcia przechodził, przeglądarka deklarowała, że zna tę właściwość, ale animacja nie podpinała się do przewijania i degradowała do zwykłej animacji czasowej bez podanego czasu trwania. Efekt: cała strona zostawała czarna. Nie biała, nie w połowie zepsuta, po prostu pusta.

Stąd zasada, którą warto przenosić do każdego projektu: stanem domyślnym elementu jest stan widoczny. Ukrywa go dopiero ten sam skrypt, który później go pokazuje. Jeśli skrypt nie wystartuje, użytkownik zobaczy treść bez animacji, zamiast nie zobaczyć nic. Do tego doszedł bezwarunkowy przebieg po dwóch i pół sekundy oraz reakcja na powrót do karty, bo przeglądarka nie liczy przecięć w zakładce działającej w tle.

Kontrast zmierzony, nie oszacowany

Strona jest ciemna i bardzo kontrastowa, a to układ, w którym łatwo o tekst, który wygląda elegancko i jest nieczytelny. Wszystkie pary kolorów zostały zmierzone, nie ocenione na oko. Najniższy współczynnik to 5,54 przy wymaganych 4,5 dla zwykłego tekstu, najwyższy blisko szesnastu.

Dlaczego ta strona jest zamknięta dla wyszukiwarki

Podgląd stoi na osobnym hoście, który wysyła nagłówek zakazujący indeksowania, a w stopce jest jedno zdanie, którego nie wolno usunąć: Vespera jest jednostką koncepcyjną i nie odwzorowuje żadnego istniejącego jachtu, stoczni ani marki. To nie jest formalność. Ładna strona z czterdziestometrowym jachtem, specyfikacją i formularzem zapytania, która trafia do wyszukiwarki bez tego zastrzeżenia, przestaje być demonstracją, a zaczyna być ofertą czegoś, co nie istnieje. Granica między jednym a drugim to dokładnie ten nagłówek i to zdanie.