Shuffle Letters Jquery Plug-in

Shuffle Letters Jquery Plug-in
As the title reads I will be exploring the JQuery plugin called Shuffle Letters today.  I have a vision for a Bootstrap web template and this effect should look great!  You can download the plugin at http://bit.ly/qyUV9A and check out what it look like on my demo page http://highabovedesign.com/graphit/test.html.  Ok so here we go.

First add a section with h1 and h2 tags.

<section>
<div class=”home”>
<div id=”first”>
 <h1>LOVE LETTERS</h1>
<h2>WORDS, WORDS, WORDS</h2>
<p>“Any word you have to hunt for
in a thesaurus is the wrong word. There
are no exceptions to this rule.”</p>
</div>
</div>
</section>

Next we'll add the downloaded javascript to the end of your document but before the closing </body> tag

<script src="js/jquery.lettering-0.6.1.min.js"></script>

Ok, so for starters we laid out the HTML framework and added the Javascript to the bottom of our page. Next we need to add the code snippet that will tell the Javascript what part of our HTML page to target.  In this case the h1 and h2 tags.

<script>
function shuffle(target){
if(target=="page") {
var container = $("h1,h2")
}
container.shuffleLetters();
}
shuffle("page");
</script>

and that pretty much does it.  There are options that you can play with in the Javascript file such as
Step Rate
FPS (frames per second)

I would like to thank +Martin Angelov for his work on the Javascript