Se vogliamo creare una semplice animazione di un testo con un conteggio numero in Javascript, possiamo farlo tramite una piccola funzione, senza l’utilizzo di librerie apposite.

Nel nostro esempio avremo un testo “+300% margine lordo” che vorremmo animare a piacimento. Il nostro obiettivo è attivare il conteggio soltanto sulla parte numerica, partendo dalla stringa “+0% margine lordo” per poi scorrere a “%1 margine lordo”, “%2 margine lordo”.. insomma ci siamo capiti. Questa soluzione è SEO-friendly, in quanto nell’HTML della nostra pagina il testo finale è già presente e indicizzabile. Inoltre, permette anche una soluzione di fallback nel caso Javascript non possa essere eseguito o in errore.

Questa funzione che ho proposto su StackOverflow, accetta quattro parametri: l’oggetto, il numero di partenza (che di default è zero), il numero di arrivo (che di default è il numero contenuto nel testo originario, “300” nel nostro esempio) e la durata in millisecondi (di default 3000).

Andiamo a vedere come funziona.

HTML

JAVASCRIPT

Ecco l’esempio in funzione: