Contatori animati senza JavaScript

Un buon numero dei modelli di contatore qui presenti si muove. Il numero sale contando se stesso, il pannello si disegna da solo, oppure qualcosa cade al proprio posto e si assesta.

Nessuno di essi usa una sola riga di JavaScript.

Come funziona

I contatori sono in formato SVG, e un SVG può contenere il proprio foglio di stile. Il movimento è costituito da keyframe CSS scritti all'interno dell'immagine stessa, quindi il tutto arriva come un unico file, in un'unica richiesta, e inizia a muoversi da solo. Il browser lo gestisce come gestisce qualsiasi altra animazione CSS: sul compositor, senza dover attivare alcuno script.

La conseguenza pratica è che un contatore animato costa quanto uno statico. Il loro peso va all'incirca da 1,8 a 3,2 KB. Non c'è alcuna libreria, nessuna seconda richiesta, e nulla che blocchi il resto della pagina durante il caricamento.

I tipi di movimento

Sono raggruppati in base a come si muovono piuttosto che a come appaiono, perché è quello, in pratica, il criterio in base al quale si sceglie:

• Costruzione progressiva — il contatore si disegna dal nulla, tratto dopo tratto.
• Con peso — qualcosa cade, rimbalza e si assesta. Un movimento con l'inerzia dietro.
• Futuristico, in movimento — bagliore, linee di scansione, nebbia che fluttua. Il più vistoso dei tre.

Esiste anche una famiglia futuristica calma, per quell'aspetto senza il movimento. Cinquantotto dei modelli disponibili sono animati al momento in cui scriviamo, un numero decisamente superiore a quanto chiunque si fosse proposto di realizzare.

Quando un visitatore ha chiesto meno movimento

I sistemi operativi hanno un'impostazione per ridurre le animazioni. Le persone la attivano per sensibilità al movimento, per disturbi vestibolari, per l'emicrania, e a volte semplicemente perché gli elementi in movimento su una pagina sono faticosi. Il browser trasmette questa preferenza a ogni pagina.

Questi contatori la rispettano. Se un visitatore ha chiesto al proprio sistema di ridurre il movimento, l'animazione non parte e arriva un contatore statico con lo stesso numero. Verificato modello per modello durante la stesura di questo articolo, non dato per scontato.

Rispettarlo costa una riga in un foglio di stile, ed è la differenza tra una decorazione e un fastidio.

Una parola contro il loro utilizzo

Il movimento attira lo sguardo. È esattamente questo il suo scopo, ed è anche l'argomento a favore della moderazione.

Se il contatore non è l'argomento della pagina — e nella maggior parte dei casi non lo è — allora qualcosa che si muove nell'angolo entra in competizione con i contenuti veri e propri per l'unica cosa che ci si aspettava dal visitatore. Un contatore statico mostra lo stesso numero senza chiedere nulla.

Quelli animati stanno bene dove il contatore fa parte del carattere della pagina: un sito personale, la pagina di un progetto, qualcosa che ha un po' di teatralità. Su una pagina dove qualcuno sta cercando di leggere, meglio uno che resta fermo.