Creating Jumping Text Animation with jQuery and CSS3 - Jumping Words
File Size: | 3.33KB |
---|---|
Views Total: | 3905 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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]==" "?" ":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.