dancing text animation
HTML
<div class="name">The Smiths</div>
CSS
.letterWrap {
font-size:30px;
/* These are needed */
position: relative;
top:0;
}
JavaScript
//break the words
var letterArr = $('.name').text().split("");
//clear it
$('.name').html('');
//put the new contained letters back in
for (var i = 0; i < letterArr.length; i++) {
var elm = "<span class='letterWrap'>" + letterArr[i] + "</span>";
$('.name').append(elm);
};
//animate based on odd or even
$('.letterWrap').each(function (i) {
if (i % 2 == 0) {
$(this).delay(100 * i).animate({
"top": "-40px"
}, 500).animate({
"top": "0px"
}, 500);
} else {
$(this).delay(100 * i).animate({
"top": "40px"
}, 500).animate({
"top": "0px"
}, 500);
}
});
function getRand(min, max) {
return Math.random() * (max - min) + min;
};