Bewegende tellers zonder JavaScript

Een flink aantal van de tellerontwerpen hier beweegt. Het getal telt zichzelf omhoog, of het paneel tekent zichzelf in beeld, of er valt iets op zijn plaats en komt tot rust.

Geen van alle gebruikt ook maar één regel JavaScript.

Hoe dat werkt

De tellers zijn SVG, en SVG kan een eigen stijlblad meedragen. De beweging bestaat uit CSS-keyframes die in de afbeelding zelf staan, dus het geheel komt aan als één bestand, in één aanvraag, en begint uit zichzelf te bewegen. De browser behandelt het zoals elke andere CSS-animatie: op de compositor, zonder een script wakker te maken.

Het praktische gevolg is dat een bewegende teller net zoveel kost als een stilstaande. Ze liggen tussen ruwweg 1,8 en 3,2 KB. Er is geen bibliotheek, geen tweede aanvraag, en niets dat de rest van de pagina ophoudt terwijl hij laadt.

De soorten beweging

Ze zijn gegroepeerd naar hoe ze bewegen en niet naar hoe ze eruitzien, want dat blijkt het punt te zijn waar de keuze werkelijk om draait:

• Opbouwend — de teller tekent zichzelf tot stand, streek voor streek.
• Met gewicht — er valt iets in, het stuitert en komt tot rust. Beweging met traagheid erachter.
• Futuristisch, in beweging — gloed, scanlijnen, drijvende nevel. De opzichtigste van de drie.

Er is ook een rustige futuristische familie, voor het geval die uitstraling gewenst is zonder de beweging. Achtenvijftig van de aangeboden ontwerpen bewegen op het moment van schrijven, wat een stuk meer is dan iemand van plan was te bouwen.

Wanneer een bezoeker om minder beweging heeft gevraagd

Besturingssystemen hebben een instelling om animatie te beperken. Mensen zetten hem aan vanwege bewegingsgevoeligheid, vanwege evenwichtsstoornissen, vanwege migraine, en soms gewoon omdat bewegende dingen op een pagina vermoeien. De browser geeft die voorkeur door aan elke pagina.

Deze tellers eerbiedigen hem. Heeft een bezoeker zijn systeem om minder beweging gevraagd, dan loopt de animatie niet en krijgt hij een stilstaande teller met hetzelfde getal erop. Ontwerp voor ontwerp nagekeken bij het schrijven hiervan, niet aangenomen.

Het kost één regel in een stijlblad om dat te respecteren, en het is het verschil tussen een versiering en een ergernis.

Een woord tegen het gebruik ervan

Beweging trekt het oog. Dat is er de hele bedoeling van, en het is tegelijk het argument voor terughoudendheid.

Gaat de pagina niet over de teller — en op de meeste pagina's is dat zo — dan concurreert een ding dat in de hoek beweegt met de echte inhoud om de aandacht van de bezoeker, en dat was juist waar de pagina voor was. Een stilstaande teller zegt hetzelfde getal zonder om iets te vragen.

Gebruik de bewegende waar de teller bij het karakter van de pagina hoort: een persoonlijke site, een projectpagina, iets met een beetje theater erin. Op een pagina waar iemand probeert te lezen, kies er een die stilhoudt.