Effetto testo elastico in DHTML
Articolo scritto da Luca Ruggiero
Allo scopo di enfatizzare un testo e dargli risalto, affinchè l'occhio del visitatore ci cada su, possiamo escogitare diversi sistemi, ma nulla è meglio di un semplice script DHTML che non sia molto invadente.
Quello che affronteremo in questo articolo, infatti, è l'effetto testo elastico, ovvero un testo che si allunga e torna alla sua dimensione di base con un tempo cadenzato e costante.
(L'articolo continua più sotto...)
Utilizzeremo un elemento di testo a cui assegnamo un ID:
<div id="elax">TESTO ELASTICO</div>Il codice CSS da associare all'elemento di testo HTML è semplicemente stilistico e non ha alcun valore ai fini funzionali dello script:
<style type="text/css">
#elax
{
text-align: Center;
color: #FF0000;
font: Bold 11px Verdana;
}
</style>
Passiamo al cuore dell'articolo, ovvero il codice Javascript che offre dinamicità al testo preso precedentemente in considerazione:
<script type="text/javascript">
function ElaxText()
{
var testo = document.getElementById("elax");
if (testo.style.letterSpacing == "0px")
{
testo.style.letterSpacing = "15px";
}
else
{
testo.style.letterSpacing = "0px";
}
}
window.setInterval("ElaxText()", 500);
</script>
Il funzionamento è semplice: recuperiamo l'elemento di testo a cui associare l'effetto ed impostiamo, al volo, una spaziatura tra le lettere e la reimpostiamo su zero a seconda del suo valore temporale; usiamo poi una temporizzazione per perpetuare l'effetto.
Testate l'esempio in una pagina HTML di prova per gustarne il risultato.
