Testo ad effetto macchina da scrivere in Dhtml

Corso jQuery
Creare applicazioni client-side col Framework jQuery

Scritto da Luca Ruggiero nella sezione Javascript

Concesso in esclusiva a MrWebmaster.it - E' vietata la pubblicazione senza espresso consenso del proprietario

Un effetto sul testo molto carino che, se ben stilizzato può risultare di grande impatto, è quello comunemente chiamato macchina da scrivere, dato che i caratteri compaiono a video singolarmente come se digitati in sequenza da una tastiera.

Utilizzeremo un script DHTML compilato in codice Javascript, facendo quindi a meno di programmi più pesanti e meno accessibili come, ad esempio, Flash.

Stamperemo a video il testo in un Tag HTML puro, in modo da non perdere nemmeno indicizzazione sui motori di ricerca; al Tag testuale utilizzato applicheremo un ID che chiamiamo, per semplicità, "testo"

<div id="testo">MRW Corsi - Corsi online professionali!</div>
ed utilizzeremo il seguente script per richiamarlo
var i = 0;
function scrivi()
{
    var ID = document.getElementById("testo");
    ID.insertAdjacentText("beforeEnd", temp.charAt(i));
    if (i < temp.length - 1)
    {
        i++;
        setTimeout("scrivi()", 100);
    }
}
function inizio()
{
    var ID = document.getElementById("testo");
    temp = ID.innerHTML;
    ID.innerHTML = "";
    scrivi();
}
Il funzionamento è semplice: utilizziamo il metodo insertAdjacentText per effettuare la stampa a video e le temporizzazioni per perpetuare l'incremento dello script e la relativa stampa sequenziale a video.

Lanciamo la funzione al caricamento della pagina
<body onload="inizio()">
ed il gioco è fatto!

I più cliccati della sezione Javascript

:: jQuery Validation: validazione di un form con jQuery (106.555)

:: Breve guida a jQuery (96.818)

:: Le espressioni regolari in Javascript (84.690)

:: Gestione delle stringhe in Javascript (74.154)

:: Stampare una pagina col Dhtml (42.639)

:: Inserire in automatico lo slash nel formato data gg/mm/aaaa (39.785)

:: Menu orizzontale dinamico in Dhtml (36.961)

:: Gli Array in Javascript (35.690)

:: Temporizzazioni Javascript (31.211)

:: Istruzion condizionali in Javascript: if e switch (28.629)

IN EVIDENZA
DOWNLOAD