Obrati se podršci

Odgovaramo e-poštom, obično u roku od dva dana.

Google reCAPTCHA provjerava ovu prijavu radi zaštite od zlouporabe; podaci se šalju tvrtki Google. Skripta se učitava tek kada se otvori ovaj obrazac.

← Sve objave

Animirani brojači bez jezika JavaScript

O sadržaju i njegovoj provjeri

U ovom članku

Priličan broj ovdašnjih dizajna brojača kreće se. Broj se sam postupno povećava, ploča se iscrtava ili nešto pada na mjesto i smiruje se.

Nijedan od njih ne koristi ni redak jezika JavaScript.

Kako to radi

Brojači su SVG, a SVG može sadržavati vlastitu stilsku tablicu. Pokret nastaje putem CSS ključnih kadrova zapisanih u samoj slici, pa sve stiže kao jedna datoteka, u jednom zahtjevu, i samo se počinje kretati. Preglednik time upravlja kao i svakom drugom CSS animacijom: u kompozitoru, bez pokretanja skripte.

Praktična je posljedica da animirani brojač košta jednako kao nepomični. Veličine su otprilike između 1,8 i 3,2 KB. Nema biblioteke, drugog zahtjeva ni ičega što bi blokiralo ostatak stranice tijekom učitavanja.

animirani brojač1,8 KB3,2 KBJavaScript0zahtjevi1

Vrste pokreta

Grupirani su prema načinu kretanja, a ne prema izgledu jer se pokazalo da upravo o tome izbor zapravo ovisi:

  • Postupna izgradnja – brojač nastaje iscrtavanjem, potez po potez.
  • S težinom – nešto pada, odskoči i smiri se. Pokret s tromošću.
  • Futuristički, u pokretu – sjaj, linije skeniranja, magla koja lebdi. Najupadljivija od triju skupina.

Postoji i mirna futuristička skupina za slučajeve kada se želi takav izgled bez kretanja. U vrijeme pisanja animirano je pedeset osam ponuđenih dizajna, što je znatno više nego što je itko namjeravao izraditi.

Kada je posjetitelj zatražio manje kretanja

Operacijski sustavi imaju postavku za smanjenje animacije. Ljudi je uključuju zbog osjetljivosti na kretanje, vestibularnih poremećaja, migrena, a ponekad jednostavno zato što ih pokretni sadržaj na stranici iscrpljuje. Preglednik prosljeđuje tu postavku svakoj stranici.

Ovi je brojači poštuju. Ako je posjetitelj od sustava zatražio smanjeno kretanje, animacija se ne pokreće i dobiva nepomični brojač s istim brojem. Provjereno dizajn po dizajn tijekom pisanja, nije pretpostavljeno.

Za poštivanje toga dovoljan je jedan redak u stilskoj tablici, a to je razlika između ukrasa i smetnje.

Nešto protiv njihove uporabe

Pokret privlači pogled. To mu je i cijeli smisao, a ujedno i argument za suzdržanost.

Ako brojač nije tema stranice – a na većini stranica nije – nešto što se kreće u kutu natječe se sa stvarnim sadržajem za pozornost posjetitelja, što je i bio smisao stranice. Nepomični brojač pokazuje isti broj, a ništa ne traži.

Koristite animirane brojače ondje gdje su dio karaktera stranice: na osobnom web-mjestu, projektnoj stranici ili nečemu što ima malo scenskog duha. Na stranici na kojoj netko pokušava čitati odaberite nepomični.

Oglas