Creare delle animazioni sul testo di un elemento è alquanto semplice con jQuery. Possiamo ad esempio marcare ciascuna lettera con un elemento diverso e quindi applicare le animazioni su ciascun elemento. Vediamo come.
Per questo esempio useremo sia jQuery che jQuery UI (per le animazioni sui colori). Partiamo dalla seguente marcatura:
<h1>
<span class="t1">T</span>
<span class="t2">i</span>
<span class="t3">t</span>
<span class="t4">l</span>
<span class="t5">e</span>
</h1>
Come si può notare, ciascuna lettera è contenuta in un elemento diverso. Assegniamo quindi i seguenti stili di base:
h1 {
font: 10em Impact, sans-serif;
padding: 0.5em;
text-transform: uppercase;
letter-spacing: .1em;
background: #000;
color: #fff;
margin: 0 auto;
width: 4em;
text-align: center;
}
h1 span {
display: none;
}
Vogliamo che le lettere appaiano una alla volta e che alla fine l'elemento cambi il suo colore di sfondo e del testo insieme con alla dimensione del font. Ecco il codice jQuery:
$(function() {
$('h1 span.t1').fadeIn(1500, function() {
$(this).next().fadeIn(1500, function() {
$(this).next().fadeIn(1500, function() {
$(this).next().fadeIn(1500, function() {
$(this).next().fadeIn(1500, function() {
$('h1').animate({
backgroundColor: '#fff',
color: '#000',
fontSize: '300px'
}, 2000);
});
});
});
});
});
});
Si tratta di semplici animazioni annidate usando la funzione di callback di ciascun metodo. Potete visionare l'esempio finale in questa pagina.