Animerade räknare utan JavaScript

En hel del av räknardesignerna här rör sig. Siffran räknar upp sig själv, panelen ritar fram sig, eller något faller på plats och blir liggande.

Ingen av dem använder en enda rad JavaScript.

Så fungerar det

Räknarna är SVG, och SVG kan bära sin egen stilmall. Rörelsen är CSS-keyframes som står inne i själva bilden, så allt kommer som en enda fil, i ett enda anrop, och börjar röra sig av sig självt. Webbläsaren hanterar det som vilken annan CSS-animation som helst: i kompositionssteget, utan att väcka något skript.

Den praktiska följden är att en animerad räknare kostar lika mycket som en stillastående. De ligger ungefär mellan 1,8 och 3,2 kB. Det finns inget bibliotek, inget andra anrop och inget som blockerar resten av sidan medan den laddas.

Olika sorters rörelse

De är grupperade efter hur de rör sig snarare än efter hur de ser ut, eftersom det visar sig vara det som valet egentligen hänger på:

• Uppbyggnad – räknaren ritar fram sig själv, drag för drag.
• Med tyngd – något faller in, studsar och landar. Rörelse med tröghet bakom sig.
• Futuristiskt, i rörelse – sken, skanningslinjer, drivande dimma. Den mest iögonfallande av de tre.

Det finns också en lugn futuristisk familj, för när man vill ha den looken utan rörelsen. Femtioåtta av de designer som erbjuds är animerade i skrivande stund, vilket är betydligt fler än någon från början tänkte bygga.

När en besökare har bett om mindre rörelse

Operativsystem har en inställning för att minska animationer. Folk slår på den på grund av rörelsekänslighet, balansrubbningar eller migrän, och ibland bara för att saker som rör sig på en sida är tröttsamma. Webbläsaren för den önskan vidare till varje sida.

De här räknarna respekterar den. Om en besökare har bett sitt system att minska rörelser körs inte animationen, och besökaren får en stillastående räknare med samma siffra. Det är kontrollerat design för design när det här skrevs, inte antaget.

Det kostar en rad i en stilmall att respektera det, och det är skillnaden mellan en dekoration och ett irritationsmoment.

Ett ord emot att använda dem

Rörelse drar blicken till sig. Det är hela poängen, och det är också argumentet för återhållsamhet.

Om räknaren inte är det sidan handlar om – och på de flesta sidor är den inte det – så konkurrerar något som rör sig i hörnet med det verkliga innehållet om besökarens uppmärksamhet, och det var ju den som var syftet med sidan. En stillastående räknare visar samma siffra utan att begära något.

Använd de animerade där räknaren är en del av sidans karaktär: en personlig webbplats, en projektsida, något med lite show över sig. På en sida där någon försöker läsa väljer du en som står still.