In questo articolo vedremo un simpatico e semplice script che permette di animare un testo facendolo comparire come se questo venisse digitato tramite una macchina da scrivere.
In altre parole realizzeremo una funzione Javascript che acquisito in input un testo, lo scriverà, un carattere per volta, all’interno di un contenitore: div, textarea o altro.
In fondo all’articolo è possibile provare o scaricare il codice completo.

La funzione che vedremo prende in input 3 parametri:
1 – id del campo dove stampare il testo
2 – il testo da stampare
3 – la velocità (espressa in millisecondi) di digitazione
Inoltre forniremo allo script un quarto parametro opzionale (numerico) ad indicare la posizione nella quale scrivere il prossimo carattere.

Vediamo subito il codice della funzione macchinaDaScrivere:

<script type='text/javascript>
function macchinaDaScrivere(id_campo, testo, velocita, posizione){
    var lunghezza = testo.length;
    posizione = posizione || 0;
    if(posizione<lunghezza){
        var carattere = testo.substring(posizione,posizione+1);
        document.getElementById(id_campo).innerHTML = document.getElementById(id_campo).innerHTML.substring(0,posizione) + carattere + "_";      
        setTimeout('macchinaDaScrivere("'+id_campo+'", "'+testo+'", '+velocita+', '+(posizione+1)+');', velocita);
    }else{       
        document.getElementById(id_campo).innerHTML = document.getElementById(id_campo).innerHTML.substring(0,lunghezza);
    }        
}
</script>

Analizziamo in maniera dettagliata la funzione Javascript macchinaDaScrivere.
Calcolo la lunghezza del testo da stampare e quindi imposto una variabile posizione ad indicare la posizione nel quale digitare il prossimo carattere.
Il cuore della funzione è chiuso all’interno di un if, valido fino a quando la posizione è minore della lunghezza del testo.
Nella variabile carattere imposto il prossimo carattere da stampare, utilizzando una substring:

var carattere = testo.substring(posizione,posizione+1);

A questo punto accodo il carattere in questione al testo già presente nel box contenitore identificato da id_campo:

document.getElementById(id_campo).innerHTML = document.getElementById(id_campo).innerHTML.substring(0,posizione) + carattere + "_";

La funzione è praticamente conclusa, non prima che questa venga richiamata con l’incremento della posizione. A tal proposito è ora chiaro il perchè della presenza del quarto parametro opzionale nella chiamata alla funzione; tale parametro alla prima chiamata varrà 0 (di default) e crescerà man mano che si avanzerà nel testo da digitare.
La funzione setTimeout utilizzerà il valore della variabile velocità per ritardare la scrittura del successivo carattere:

setTimeout('macchinaDaScrivere("'+id_campo+'","'+testo+'",'+velocita+','+(posizione+1)+');',velocita);

Infine è necessario notare la presenza di un carattere di underscore basso alla fine di ciascuna digitazione. E’ chiaro come questo carattere sia esclusivamente “ornamentale” e può essere facilmente rimosso dal codice.

Cliccando qui è possibile vedere in azione il codice.

Cliccando qui è possibile scaricare il codice.