Today my smart father showed me an animation when all the letters of a word were scrambled together and wrapped within a container. Then the letters moved to the right, their container bent forward and the whole word started to appear in the correct order. An ideal challenge for jQuery!
We need a markup where the letters are marked up with separate elements:
<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>
We need to position the letters and define a special class called rotate in our CSS:
#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);
}
With jQuery we need to change the position of the heading, add the special CSS class to make it rotate (and then remove the class itself), animate all the letters by putting them in the right position through their left property and finally move the heading back to its original position:
$(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);
});
Since there are a lot of nested animations, you could use deferred objects in this case. You can see the demo below.