jQuery Plugin To Jumbles Up Text with CSS3 Animations - jwquaketext

jwquaketext is a jQuery plugin that jumbles up your text and animates them with an earthquake effect using CSS3 transforms.

How to use it:

1. Load the latest version of jQuery library and the jQuery jwquaketext plugin in the html page.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="jwquaketext.js"></script>

2. Add the required styles to your CSS.

.quake span.quake:nth-child(odd), .quake span.quake:nth-child(even) { display: inline-block; }

3. Add the CSS class 'quake' to the text wrapper.

<h1 class="quake">jQuery jwquaketext</h1>

4. Call the function on the text wrapper.

$("h1").quake(OPTIONS);

6. Animate the text with an earthquake effect.

var timerHandle = setInterval(function(){$("h1").quake({xShift:15, yShift:15});}, 50);

7. Default plugin options.

// Randomize the angle.
// The values for randomMin and randomMax be used to determine the final rotation angle.
'random' : true,   

// The min rotation angle random rotations.
'randomMin' : -20, 

// The max rotation angle random rotations.
'randomMax' : 20,  

// (If not using random) Sets explicit angle for every [even] character in this element.
'even' : null,    

// (If not using random) Sets explicit angle for every [odd] character in this element.
'odd' : null,      

// (Random) The max number of pixels the letters will move left/right. 
'xShift' : 2,      

// (Random) The max number of pixels the letters will move up/down.
'yShift' : 5       

---

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