Random Text Animation

by Victor

HTML

<div class="name">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium consequuntur adipisci dolor veritatis quas laborum cupiditate consequatur optio non voluptatem qui officia doloribus est aliquid voluptas facilis nostrum molestiae corrupti?</div>

CSS

.name {
    text-align: center;
    padding:100px;
}
.letterWrap {
    /*border:1px solid red;*/
    position: relative;
    top:0;
    font-size: 30px;
}

JavaScript

//break the words
    var thing = $('.name').text().split("");
//clear it
    $('.name').html('');
//put the new contained letters back in
    for (var i = 0; i < thing.length; i++) {
        var elm = "<span class='letterWrap'>" + thing[i] + "</span>";

        $('.name').append(elm);
    };

 $('.letterWrap').css({
                      "position":"relative",
                      "top": getRand(0,200) + "px", 
                      "right": getRand(0,200) + "px",
     "opacity": 0
                  });



              $('.letterWrap').each(function(i){
                 
              
	if (i%2 == 0)
    {
                $(this).delay(100 * i).animate({
            "top": "-40px"
        },200).animate({
            "top": "0px",
                    "right": "0px",
                    opacity: 1
        },200);
    }
	else
    {
                $(this).delay(100 * i).animate({
            "top": "40px"
        },200).animate({
            "top": "0px",
                     "right": "0px",
                        opacity: 1
        },200);
    }
                  


    });

function getRand(min, max) {
    return Math.random() * (max - min) + min;
};