//FUTURE fade in sequentially & animate, EASEOUTBOUNCE down during fade

by Ian Roberts

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<div class="faded bold">Be Bold.</div>
<div class="faded out">Get Out.</div>
<div class="faded wrong">Think Wrong.</div>
<div class="faded stuff">Make Stuff.</div>
<div class="faded small">Bet Small.</div>
<div class="faded forward">Fast Forward.</div>
<div class="faded credit"><a href="http://www.futurepartners.is/The-Blitz-Cycle">- futurepartners.is</a></div>
<div>other text</div>

CSS

.faded {position:relative; top:-100px; color:#fff; font-weight:bold; font-family:sans-serif; padding-left:5px;}
.credit a, .credit a:visited {color:#ccc; text-decoration:none;}
.credit a:hover, .credit a:active {color:#bbb;text-decoration:underline;}

JavaScript

//FUTURE fade in sequentially & animate, EASEOUTBOUNCE down during fade
$(".faded").each(function(delay) {
    $(this).css('display', 'block').animate({ opacity: 0 }, 0).delay(delay * 100).animate({ opacity: 1, "top": "+=100px" }, 1500, "easeOutBounce" );
    $('.bold').css('background-color','#c6531d');
    $('.out').css('background-color','#64a8af');
    $('.wrong').css('background-color','#bf2d31');
    $('.stuff').css('background-color','#b69165');
    $('.small').css('background-color','#bdb318');
    $('.forward').css('background-color','#849E19');
    $('.credit').css('background-color','#131313');
});
//add diff easing properties to make it more swift

//for clear use of easing/instructs - http://easings.net/
//for easing cdn - http://cdnjs.com/