Contoare animate fără JavaScript

Un număr bun dintre designurile de contor de aici se mișcă. Numărul crește singur, panoul se desenează treptat sau ceva cade la locul lui și se așază.

Niciunul nu folosește vreo linie de JavaScript.

Cum funcționează

Contoarele sunt SVG, iar un SVG își poate purta propria foaie de stil. Mișcarea constă în keyframes CSS scrise chiar în interiorul imaginii, așa că totul sosește ca un singur fișier, într-o singură cerere, și începe să se miște de la sine. Browserul o tratează ca pe orice altă animație CSS: în compozitor, fără să trezească vreun script.

Consecința practică este că un contor animat costă cât unul static. Au între aproximativ 1,8 și 3,2 KB. Nu există nicio bibliotecă, nicio a doua cerere și nimic care să blocheze restul paginii în timp ce se încarcă.

Tipurile de mișcare

Sunt grupate după felul în care se mișcă, nu după cum arată, pentru că de acest lucru depinde de fapt alegerea:

• Construcție treptată — contorul se desenează singur, trăsătură cu trăsătură.
• Cu greutate — ceva cade, sare și se așază. Mișcare cu inerție.
• Futurist, în mișcare — strălucire, linii de scanare, ceață în derivă. Cea mai spectaculoasă dintre cele trei.

Există și o familie futuristă calmă, pentru cazul în care se dorește acest aspect fără mișcare. În momentul scrierii, cincizeci și opt dintre designurile disponibile sunt animate, mult mai multe decât și-a propus cineva să construiască.

Când un vizitator a cerut mai puțină mișcare

Sistemele de operare au o setare pentru reducerea animațiilor. Oamenii o activează din cauza sensibilității la mișcare, a tulburărilor vestibulare, a migrenelor și uneori pur și simplu pentru că elementele care se mișcă pe o pagină sunt obositoare. Browserul transmite această preferință fiecărei pagini.

Aceste contoare o respectă. Dacă un vizitator a cerut sistemului său să reducă mișcarea, animația nu rulează și vede un contor static cu același număr. Verificat design cu design în timpul redactării, nu presupus.

Respectarea acestei preferințe costă o linie într-o foaie de stil și face diferența dintre o decorațiune și o pacoste.

Un cuvânt împotriva folosirii lor

Mișcarea atrage privirea. Acesta este tot rostul ei și tot acesta este argumentul pentru reținere.

Dacă pagina nu este despre contor — și pe cele mai multe pagini nu este — atunci un lucru care se mișcă în colț concurează cu conținutul real pentru atenția vizitatorului, iar conținutul era rostul paginii. Un contor static arată același număr fără să ceară nimic.

Folosiți-le pe cele animate acolo unde contorul face parte din caracterul paginii: un site personal, pagina unui proiect, ceva cu puțin spirit de spectacol. Pe o pagină pe care cineva încearcă să citească, alegeți unul care stă nemișcat.