Animeeritud loendurid ilma JavaScriptita

Üsna paljud siinsed loenduri kujundused liiguvad. Number loeb end üles, paneel joonistab end valmis või miski kukub paika ja rahuneb.

Mitte ükski neist ei kasuta ainsatki rida JavaScripti.

Kuidas see töötab

Loendurid on SVG ja SVG võib kanda oma stiililehte. Liikumine on CSS-i võtmekaadrid, mis on kirjutatud pildi enda sisse, nii et kogu asi saabub ühe failina, ühe päringuga ja hakkab ise liikuma. Brauser käsitleb seda nagu iga teist CSS-animatsiooni: kompositoris, skripti äratamata.

Praktiline tagajärg on, et animeeritud loendur maksab sama palju kui liikumatu. Need on ligikaudu 1,8 kuni 3,2 KB suurused. Teeke pole, teist päringut pole ja miski ei blokeeri lehe ülejäänud osa laadimist.

Liikumise liigid

Need on rühmitatud selle järgi, kuidas nad liiguvad, mitte selle järgi, kuidas nad välja näevad, sest valik sõltub tegelikult just sellest:

• Ülesehitamine – loendur joonistab end olemasolevaks, löök löögi haaval.
• Raskusega – miski kukub sisse, põrkab ja rahuneb. Liikumine, mille taga on inerts.
• Futuristlik, liikuv – hõõgus, skaneerimisjooned, hõljuv udu. Neist kolmest kõige uhkem.

On ka rahulik futuristlik rühm, kui sellist ilmet soovitakse ilma liikumiseta. Kirjutamise hetkel animeerub viiskümmend kaheksa pakutavat kujundust, mis on palju rohkem, kui keegi ette võttis.

Kui külastaja on palunud vähem liikumist

Operatsioonisüsteemidel on animatsiooni vähendamise säte. Inimesed lülitavad selle sisse liikumistundlikkuse, vestibulaarhäirete, migreeni tõttu ja vahel lihtsalt seetõttu, et liikuvad asjad lehel väsitavad. Brauser annab selle eelistuse igale lehele edasi.

Need loendurid arvestavad sellega. Kui külastaja on oma süsteemis palunud liikumist vähendada, animatsiooni ei käivitata ja ta saab liikumatu loenduri sama numbriga. Kontrollitud kujundus kujunduse haaval selle kirjutamise ajal, mitte eeldatud.

Selle austamine nõuab stiililehes ühte rida ja see ongi vahe kaunistuse ja tüütuse vahel.

Sõna nende kasutamise vastu

Liikumine tõmbab pilku. See on selle terve mõte ja ühtlasi ka argument kokkuhoidlikkuse poolt.

Kui leht ei räägi loendurist – ja enamikul lehtedel ei räägi –, siis nurgas liikuv asi võistleb sisuga külastaja tähelepanu pärast, kuigi just sisu pärast leht olemas on. Liikumatu loendur ütleb sama numbri, midagi nõudmata.

Kasutage animeeritud loendureid seal, kus loendur on lehe iseloomu osa: isiklik sait, projektileht, miski, milles on veidi etendust. Lehel, kus keegi püüab lugeda, valige selline, mis püsib paigal.