Ruchome liczniki bez JavaScriptu

Spora część dostępnych tutaj wzorów liczników się porusza. Liczba sama odlicza w górę, panel sam się rysuje, albo coś wpada na swoje miejsce i się zatrzymuje.

Żaden z nich nie używa ani jednej linijki JavaScriptu.

Jak to działa

Liczniki są w formacie SVG, a SVG może nieść własny arkusz stylów. Ruch to klatki kluczowe CSS (CSS keyframes) zapisane wewnątrz samego obrazka, więc całość dociera jako jeden plik, w jednym żądaniu, i zaczyna się poruszać samodzielnie. Przeglądarka obsługuje to tak samo, jak każdą inną animację CSS: na etapie kompozycji (compositor), bez budzenia żadnego skryptu.

Praktyczny skutek jest taki, że animowany licznik kosztuje tyle samo, co nieruchomy. Ich rozmiar to zwykle mniej więcej od 1,8 do 3,2 KB. Nie ma żadnej biblioteki, żadnego drugiego żądania i niczego, co blokowałoby resztę strony podczas ładowania.

Rodzaje ruchu

Są pogrupowane według tego, jak się poruszają, a nie według tego, jak wyglądają, bo to właśnie okazuje się tą cechą, która faktycznie rozstrzyga o wyborze:

• Budowanie się – licznik rysuje samego siebie, kreska po kresce.
• Z ciężarem – coś wpada, odbija się i się zatrzymuje. Ruch z bezwładnością w tle.
• Futurystyczne, w ruchu – poświata, linie skanowania, snująca się mgła. Najbardziej efektowne z całej trójki.

Jest też spokojna rodzina futurystyczna, na wypadek, gdy ten wygląd ma obejść się bez ruchu. Pięćdziesiąt osiem z oferowanych wzorów animuje się w chwili pisania tego tekstu, co jest sporo więcej, niż ktokolwiek zamierzał zbudować.

Gdy odwiedzający poprosił o mniej ruchu

Systemy operacyjne mają ustawienie ograniczające animacje. Ludzie włączają je z powodu wrażliwości na ruch, zaburzeń błędnika, migren, a czasem po prostu dlatego, że poruszające się elementy na stronie są męczące. Przeglądarka przekazuje tę preferencję do każdej strony.

Te liczniki to respektują. Jeśli odwiedzający poprosił swój system o ograniczenie ruchu, animacja się nie uruchamia, a on dostaje nieruchomy licznik z tą samą liczbą. Sprawdzone wzór po wzorze podczas pisania tego tekstu, a nie założone.

Uszanowanie tego kosztuje jedną linijkę w arkuszu stylów, a to różnica między ozdobą a uciążliwością.

Słowo przeciwko ich używaniu

Ruch przyciąga wzrok. To cały sens jego istnienia, i to jest jednocześnie argument za powściągliwością.

Jeśli licznik nie jest tym, o czym jest sama strona – a na większości stron nie jest – to coś, co porusza się w rogu, konkuruje z rzeczywistą treścią o jedyną rzecz, o jaką w ogóle chodzi u odwiedzającego. Nieruchomy licznik pokazuje tę samą liczbę, o nic nie prosząc.

Animowane pasują tam, gdzie licznik jest częścią charakteru strony: strona osobista, strona projektu, coś z odrobiną popisu. Na stronie, na której ktoś próbuje czytać, lepszy jest taki, który stoi w miejscu.