Animált számlálók JavaScript nélkül

Az itteni számlálódizájnok jó része mozog. A szám magától felpörög, vagy a panel kirajzolja önmagát, vagy valami a helyére esik és megállapodik.

Egyikük sem használ egyetlen sor JavaScriptet sem.

Hogyan működik

A számlálók SVG-k, az SVG pedig saját stíluslapot hordozhat. A mozgást a képen belül megírt CSS-kulcskockák (keyframes) adják, így az egész egyetlen fájlként, egyetlen kéréssel érkezik, és magától indul el. A böngésző ugyanúgy kezeli, mint bármely más CSS-animációt: a kompozitoron, anélkül hogy egy szkriptet felébresztene.

A gyakorlati következmény az, hogy egy animált számláló ugyanannyiba kerül, mint egy álló. Méretük nagyjából 1,8 és 3,2 KB között van. Nincs könyvtár, nincs második kérés, és semmi sem blokkolja az oldal többi részét, amíg betöltődik.

A mozgás fajtái

Aszerint vannak csoportosítva, hogyan mozognak, nem pedig aszerint, hogy milyenek, mert kiderült, hogy a választás valójában ezen múlik:

• Felépülő – a számláló vonásról vonásra rajzolja meg önmagát.
• Súllyal – valami beesik, pattan egyet, majd megállapodik. Tehetetlenséggel teli mozgás.
• Futurisztikus, mozgó – ragyogás, pásztázó vonalak, sodródó köd. A három közül a leglátványosabb.

Van egy nyugodt futurisztikus család is arra az esetre, ha ez a megjelenés mozgás nélkül kell. E sorok írásakor a kínálatban szereplő dizájnok közül ötvennyolc animált, ami jóval több annál, mint amennyit bárki eredetileg tervezett.

Ha a látogató kevesebb mozgást kért

Az operációs rendszerekben van egy beállítás az animációk csökkentésére. Az emberek mozgásérzékenység, egyensúlyszervi zavarok vagy migrén miatt kapcsolják be, és néha egyszerűen csak azért, mert az oldalon mozgó dolgok kimerítők. A böngésző ezt a beállítást minden oldalnak továbbadja.

Ezek a számlálók tiszteletben tartják. Ha egy látogató arra kérte a rendszerét, hogy csökkentse a mozgást, az animáció nem fut le, és álló számlálót kap ugyanazzal a számmal. Ezt a bejegyzés írása közben dizájnonként ellenőriztük, nem csak feltételeztük.

Egyetlen sorba kerül a stíluslapban, hogy ezt tiszteletben tartsuk, és ezen múlik, hogy díszítés lesz-e belőle vagy kellemetlenség.

Egy szó a használatuk ellen

A mozgás vonzza a tekintetet. Pontosan ez a lényege, és egyben ez az érv a mértékletesség mellett is.

Ha nem a számláló az oldal lényege – és a legtöbb oldalon nem az –, akkor a sarokban mozgó valami a tényleges tartalommal versenyez a látogató figyelméért, pedig az oldal éppen ezért a figyelemért készült. Egy álló számláló ugyanazt a számot mutatja, anélkül hogy bármit kérne.

Az animáltakat ott használja, ahol a számláló az oldal karakterének része: egy személyes weboldalon, egy projektoldalon, valamin, amiben van egy kis látványosság. Olyan oldalon, ahol valaki olvasni próbál, válasszon egy mozdulatlant.