Oggi mio padre mi ha descritto un'animazione su un sito in cui le lettere di una parola erano sistemate in modo disordinato su un contenitore. Le lettere scorrevano verso destra, il contenitore si inclinava e le faceva cadere giù. Poi le lettere si raggruppavano a sinistra, formavano una parola e tornavano nel contenitore. Una sfida ideale per jQuery!
Impostiamo la marcatura in modo da avere le lettere all'interno di elementi separati:
<div id="letters">
<h1>
<span class="e">e</span>
<span class="r">r</span>
<span class="u">u</span>
<span class="j">J</span>
<span class="q">q</span>
<span class="y">y</span>
</h1>
</div>
Nei CSS dobbiamo sistemare le lettere tramite il posizionamento contestuale. Dobbiamo inoltre creare una classe CSS che sfrutterà le rotazioni CSS3 per far inclinare il contenitore principale:
#letters {
width: 400px;
border-bottom: 1px solid;
}
#letters h1 {
margin: 0;
font: 3em 'Arial Narrow', Arial, sans-serif;
position: relative;
height: 1em;
}
h1 span {
position: absolute;
top: 0;
}
span.e {
left: 0;
}
span.r {
left: 1em;
}
span.u {
left: 2em;
}
span.j {
left: 3em;
}
span.q {
left: 4em;
}
span.y {
left: 5em;
}
.rotate {
-moz-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
Con jQuery dobbiamo cambiare la posizione dell'elemento h1, aggiungere la classe CSS .rotate (e poi rimuoverla) al contenitore per creare l'effetto dell'inclinazione quando le lettere superano il limite dello stesso e quindi animare gli elementi span uno ad uno risistemando la loro proprietà left. Infine, la proprietà top dell'elemento h1 deve riassumere il valore 0 così da risistemare l'elemento nella posizione originaria.
$(function() {
setTimeout(function() {
$('h1', '#letters').animate({
left: 300
}, 'slow', function() {
$('#letters').addClass('rotate');
$(this).animate({
left: '+=100',
top: 100
}, 'slow', function() {
$('#letters').removeClass('rotate');
$(this).animate({
left: 0
}, 'slow', function() {
$('span.j').animate({
left: 0
}, 'slow', function() {
$('span.q').animate({
left: '1em'
}, 'slow', function() {
$('span.u').animate({
left: '2em'
}, 'slow', function() {
$('span.e').animate({
left: '3em'
}, 'slow', function() {
$('span.r').animate({
left: '4em'
}, 'slow', function() {
$('span.y').animate({
left: '5em'
}, 'slow', function() {
$('h1', '#letters').animate({
top: 0
}, 'slow');
});
});
});
});
});
});
});
});
});
}, 3000);
});
Fabrizio Calderan, notando che ci sono molte animazioni annidate, mi ha giustamente suggerito di usare i deferred objects di jQuery per rendere il codice più leggibile. Un consiglio che raccomando anche a voi.
Potete visionare l'esempio finale in questa pagina.