Last Updated: February 25, 2016
·
2.979K
· leethelobster

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/

1 Response
Add your response

thanks for sharing :D

over 1 year ago ·