Animovaná počítadla bez JavaScriptu

Dost designů počítadel se tu hýbe. Číslo se samo napočítá, panel se sám vykreslí nebo něco zapadne na místo a usadí se.

Žádný z nich nepoužívá ani řádek JavaScriptu.

Jak to funguje

Počítadla jsou SVG a SVG si může nést vlastní styly. Pohyb tvoří klíčové snímky CSS zapsané přímo v obrázku, takže celé to přijde jako jeden soubor v jednom požadavku a samo se to rozhýbe. Prohlížeč to zpracuje jako každou jinou animaci CSS: v kompozitoru, bez probouzení skriptu.

V praxi to znamená, že animované počítadlo stojí stejně jako nehybné. Mají zhruba 1,8 až 3,2 KB. Žádná knihovna, žádný druhý požadavek a nic, co by při načítání blokovalo zbytek stránky.

Druhy pohybu

Jsou seřazené podle toho, jak se hýbou, ne podle toho, jak vypadají, protože právě na tom volba ve skutečnosti závisí:

• Postupné skládání – počítadlo se vykreslí tah po tahu.
• S vahou – něco spadne, odrazí se a usadí. Pohyb se setrvačností.
• Futuristické, v pohybu – záře, řádkové linky, plující mlha. Nejokázalejší ze tří.

Existuje i klidná futuristická rodina pro případ, kdy chcete ten vzhled bez pohybu. V době psaní se animuje padesát osm nabízených designů, což je mnohem víc, než kdo původně plánoval postavit.

Když si návštěvník přeje méně pohybu

Operační systémy mají nastavení pro omezení animací. Lidé ho zapínají kvůli citlivosti na pohyb, kvůli poruchám rovnováhy, kvůli migrénám a někdy prostě proto, že věci pohybující se na stránce vyčerpávají. Prohlížeč tuto volbu předává každé stránce.

Tato počítadla ji respektují. Pokud návštěvník požádal systém o omezení pohybu, animace se nespustí a dostane nehybné počítadlo se stejným číslem. Ověřeno při psaní design po designu, ne předpokládáno.

Respektovat to stojí jeden řádek ve stylech a je to rozdíl mezi ozdobou a obtěžováním.

Slovo proti jejich používání

Pohyb přitahuje pohled. V tom je celý jeho smysl a zároveň je to argument pro zdrženlivost.

Pokud počítadlo není tím, o čem stránka je – a na většině stránek není –, pak věc, která se hýbe v rohu, soupeří se skutečným obsahem o pozornost návštěvníka, kvůli níž stránka existuje. Nehybné počítadlo řekne totéž číslo, aniž by o cokoli žádalo.

Animovaná používejte tam, kde je počítadlo součástí charakteru stránky: osobní web, stránka projektu, něco s trochou efektu. Na stránce, kde se někdo snaží číst, zvolte takové, které stojí na místě.