Animuoti skaitikliai be JavaScript

Nemaža dalis čia esančių skaitiklių dizainų juda. Skaičius pats didėja, skydelis nusipiešia arba kažkas nukrinta į vietą ir nusistovi.

Nė vienas nenaudoja nė vienos JavaScript eilutės.

Kaip tai veikia

Skaitikliai yra SVG, o SVG gali turėti savo stilių aprašą. Judėjimą sukuria CSS pagrindiniai kadrai, įrašyti pačiame paveikslėlyje, todėl viskas atkeliauja vienu failu, viena užklausa ir pradeda judėti savaime. Naršyklė tai tvarko kaip bet kurią kitą CSS animaciją: komponavimo sistemoje, nepažadindama scenarijaus.

Praktiškai tai reiškia, kad animuotas skaitiklis kainuoja tiek pat, kiek nejudantis. Jie užima maždaug nuo 1,8 iki 3,2 KB. Nėra bibliotekos, antros užklausos ir nieko, kas įkėlimo metu blokuotų likusią puslapio dalį.

Judėjimo rūšys

Jie sugrupuoti pagal tai, kaip juda, o ne kaip atrodo, nes būtent nuo to, pasirodo, iš tiesų priklauso pasirinkimas:

• Susidarymas – skaitiklis nusipiešia pats, brūkšnys po brūkšnio.
• Su svoriu – kažkas nukrinta, atšoka ir nusistovi. Judesys su inercija.
• Futuristiniai, judantys – švytėjimas, skenavimo linijos, slenkantis rūkas. Efektingiausia iš trijų grupių.

Yra ir rami futuristinė šeima, kai norisi tokios išvaizdos be judesio. Rašant šį tekstą animuoti penkiasdešimt aštuoni siūlomi dizainai – gerokai daugiau, nei kas nors iš pradžių ketino sukurti.

Kai lankytojas paprašė mažiau judesio

Operacinės sistemos turi animacijos mažinimo nuostatą. Žmonės ją įjungia dėl jautrumo judesiui, vestibulinių sutrikimų, migrenos, o kartais tiesiog todėl, kad judantys dalykai puslapyje vargina. Naršyklė perduoda šią parinktį kiekvienam puslapiui.

Šie skaitikliai jos paiso. Jei lankytojas sistemoje paprašė sumažinti judėjimą, animacija neveikia ir rodomas nejudantis skaitiklis su tuo pačiu skaičiumi. Rašant tekstą patikrintas kiekvienas dizainas, ne spėliota.

Norint to paisyti, pakanka vienos stilių aprašo eilutės, ir tai skiria puošmeną nuo trukdžio.

Argumentas prieš jų naudojimą

Judesys traukia akį. Tai ir yra visa jo paskirtis, bet kartu ir argumentas elgtis saikingai.

Jei skaitiklis nėra puslapio esmė – o daugumoje puslapių nėra, – kampe judantis daiktas su tikruoju turiniu varžosi dėl lankytojo dėmesio, kuriam puslapis ir buvo skirtas. Nejudantis skaitiklis pasako tą patį skaičių nieko neprašydamas.

Animuotus naudokite ten, kur skaitiklis yra puslapio charakterio dalis: asmeninėje svetainėje, projekto puslapyje, kur norisi truputį efekto. Puslapyje, kuriame kas nors bando skaityti, rinkitės nejudantį.