Animované počítadlá bez jazyka JavaScript

Pomerne veľa tunajších dizajnov počítadiel sa hýbe. Číslo sa samo postupne zvyšuje, panel sa vykresľuje alebo niečo spadne na miesto a ustáli sa.

Žiadne z nich nepoužíva ani jediný riadok kódu v jazyku JavaScript.

Ako to funguje

Počítadlá sú vo formáte SVG a SVG môže obsahovať vlastný štýlopis. Pohyb tvoria kľúčové snímky CSS zapísané priamo v obrázku, takže všetko dorazí ako jeden súbor v jednej požiadavke a samo sa začne hýbať. Prehliadač to spracuje ako každú inú animáciu CSS: v kompozitore bez prebudenia skriptu.

Praktickým dôsledkom je, že animované počítadlo stojí toľko ako statické. Ich veľkosť sa pohybuje približne od 1,8 do 3,2 KB. Nie je tu knižnica, druhá požiadavka ani nič, čo by počas načítavania blokovalo zvyšok stránky.

Druhy pohybu

Sú zoskupené podľa toho, ako sa hýbu, nie podľa vzhľadu, pretože sa ukazuje, že práve to rozhoduje o výbere:

• Postupné vytváranie – počítadlo sa vykresľuje ťah po ťahu.
• S hmotnosťou – niečo spadne, odrazí sa a ustáli. Pohyb so zotrvačnosťou.
• Futuristické v pohybe – žiara, skenovacie čiary, plávajúca hmla. Najvýraznejšia z troch skupín.

Existuje aj pokojná futuristická rodina pre prípad, keď je žiadaný takýto vzhľad bez pohybu. V čase písania sa animuje päťdesiatosem ponúkaných dizajnov, čo je podstatne viac, než mal ktokoľvek pôvodne v pláne vytvoriť.

Keď návštevník požiadal o menej pohybu

Operačné systémy majú nastavenie na obmedzenie animácií. Ľudia ho zapínajú pre citlivosť na pohyb, vestibulárne poruchy, migrény a niekedy len preto, že pohybujúce sa veci na stránke vyčerpávajú. Prehliadač túto preferenciu odovzdáva každej stránke.

Tieto počítadlá ju rešpektujú. Ak návštevník požiadal svoj systém o obmedzenie pohybu, animácia sa nespustí a dostane statické počítadlo s rovnakým číslom. Overené pri písaní dizajn po dizajne, nie predpokladané.

Rešpektovať to stojí jeden riadok v štýlopise a je to rozdiel medzi ozdobou a nepríjemnosťou.

Slovo proti ich používaniu

Pohyb priťahuje pohľad. To je celý jeho zmysel a zároveň argument pre zdržanlivosť.

Ak počítadlo nie je tým, o čom stránka je – a na väčšine stránok nie je –, pohybujúca sa vec v rohu súperí so skutočným obsahom o pozornosť návštevníka, kvôli ktorej stránka vznikla. Statické počítadlo ukáže to isté číslo bez toho, aby si niečo pýtalo.

Animované použite tam, kde je počítadlo súčasťou charakteru stránky: osobný web, projektová stránka, niečo s trochou efektnosti. Na stránke, kde sa niekto snaží čítať, vyberte také, ktoré zostáva nehybné.