Counter animato con numero che sale da un minimo a un massimo quando entra nel viewport e legato allo scroll

Premessa

Il counter fa salire un numero da un valore iniziale a uno finale: utile per statistiche, traguardi, contatori di progetto. Si configurano i valori, i decimali, il separatore delle migliaia, prefisso e suffisso.

La scelta che mi sta più a cuore è l’accessibilità. Il markup salvato contiene già il valore finale, formattato. Quindi senza JavaScript, o in modalità ridotta, il lettore vede il numero fermo e corretto, non uno zero o un campo vuoto. Il conteggio è una decorazione che si aggiunge sopra un dato già presente, non l’unico modo per leggerlo.

Provalo dal vivo

Scorri fino ai numeri: salgono una volta sola quando entrano in vista.