Fade in text randomly
Thanks to:
http://fredibach.ch/jquery-plugins/livingfade.php
HTML
<div>
<span>Genius:</span>
<span>one</span>
<span>percent</span>
<span>inspiration</span>
<span>and</span>
<span>99</span>
<span>percent</span>
<span>perspiration.</span>
</div>
CSS
div{
padding: 30px;
font-size: 30px;
text-transform: uppercase;
text-align: center;
font-family: arial;
}
span {
opacity: 0;
}
JavaScript
$(document).ready(function() {
var count = 0;
var maxDelay = 1500;
var minSpeed = 1500;
var maxSpeed = 1000;
var fadeTo = 1;
$('div span').each(function(i, v){
var delay = Math.ceil(i * maxDelay);
var speed = maxSpeed + Math.ceil(1 * (minSpeed - maxSpeed));
count++;
$(this).delay(delay).fadeTo(speed, fadeTo, function(){
count--;
if (count == 0){
onFinish();
}
});
});
function onFinish() {
//alert('fin');
}
});
/*
Ok, I took part of the code here: http://fredibach.ch/jquery-plugins/livingfade.php
I'm lame, I know. lol. :D
*/