Creating Jumping Text Animation with jQuery and CSS3 - Jumping Words

A text animation script based on jQuery and CSS3 transition to create animated letters that are jumping from the bottom to the top.

How to use it:

1. Include the latest version of jquery library from google CDN.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

2. The CSS styles.

span {
background-color: white;
-webkit-transition: all 0.25s;
-moz-transition: all 0.25s;
-o-transition: all 0.25s;
-ms-transition: all 0.25s;
transition: all 0.25s;
position: relative;
float: left;
top: 400px;
opacity: 0;
}

3. Create and animate letters via javascript.

$(document).ready(function(){
var string0 = "Nel mezzo del cammin di nostra vita mi ritrovai per una selva oscura che la diritta via era smarrita. ";
for (var n = 0; n < string0.length; n++){
$("body").append("<span id='a"+n+"'>" + (string0[n]==" "?"&nbsp;":string0[n]) + "</span>");	  	
$("#a" + n + "").delay(n*50).queue( function(next){
$(this).css({"top": "10px", "opacity" : "1"});
next();
});
};
});

---

This awesome jQuery plugin is developed by openape. For more Advanced Usages, please check the demo page or visit the official website.