FadeIn Words Randomly - jQuery
Ok, I took part of the code here: <a href='http://fredibach.ch/jquery-plugins/livingfade.php'>LivingFade jQuery Plugin</a>
I'm lame, I know. lol. :D
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;
}
jQuery
$(document).ready(function() {
var count = 0;
var maxDelay = 1500;
var minSpeed = 1500;
var maxSpeed = 1000;
var fadeTo = 1;
$('div span').each(function(){
var delay = Math.ceil(Math.random() * maxDelay);
var speed = maxSpeed + Math.ceil(Math.random() * (minSpeed - maxSpeed));
count++;
$(this).delay(delay).fadeTo(speed, fadeTo, function(){
count--;
if (count == 0){
onFinish();
}
});
});
function onFinish() {
//alert('fin');
}
});
DEMO
http://jsfiddle.net/leethelobster/8qmZV/
Written by Joanna Ong
Related protips
1 Response
thanks for sharing :D
over 1 year ago
·
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Random
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#