News

Create attention grabbing shuffle text effects with jQuery

Discover how to implement the ShuffleLetters jQuery plug-in, developed by Martin Angelov, to add some landing page sparkle without bewildering the visitor.

designembraced

Considering the huge amount of amazing websites out there, it can sometimes be tempting to load up your own site with a variety of snazzy jQuery effects in an attempt to set it apart.

Too often this just results in an unnecessary glut of scripting bells and whistles, not to mention a series of damaging distractions from the information you’re trying to get across to the user. Less is usually more and the simplest effect, which doesn’t outstay its welcome, can be the most effective.

An excellent example can be found with the ShuffleLetters jQuery plug-in, developed by Martin Angelov, which offers a neat way to give your website some landing sparkle without bewildering the visitor.

TECHNIQUE

Implementing the shuffle

The HTML

For the purposes of this tutorial, we are going to recreate the effect with our own text, adhering to the basic style employed by Anthony Goodwin. The first step is to create an index.html which contains the following HTML within the body. Ultimately, the H1 and H2 tags will be the only elements subject to the shuffle effect. This is intended to be a single-page website, so using sections will allow the addition of further pages within the same document, if so desired.

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

The CSS

The key to this site is keeping it simple. Place a CSS folder in your root and copy the CSS from the disc into it. Select a background colour for your body and fonts for your text elements. Anthony Goodwin’s chunky Futura works well and the dark-grey background gives it a stark look. Give the <div>s absolute positions with comfortable margins for the text area. Carefully chosen line-heights will keep the H1 and H2 elements in close proximity to each other and letter-spacing adjustments result in close-knit font styles. H1, H2 and p tags can be given set widths if you wish.

Download the plug-in

Now for the engine. Head to http://bit.ly/qyUV9A/ and download Martin Angelov’s JavaScript files to realise the shuffle effect. While you’re there, why not try out the smart demo page, which allows you to test the effect with your own text. Place jquery.shuffleLetters.js into a JS folder and put that into your root, along with a copy of jquery-1.8.0.min.js. Then make sure you call all relevant files in index.html.

001 <link rel=”stylesheet” href=”css/    style.    css”/>
 002 <script src=”js/jquery-1.8.0.min.    js”></    script>
 003 <script src=”js/jquery.        shuffleLetters.    js”></script>

Target the tags

Now we just need to include a small script snippet into our index.html, or a separate .js file, telling the shuffle function to target only H1 and H2 tags.

001 <script>
 002 function shuffle(target) { 
 003 if(target==”page”) {
 004 var container = $(“h1,h2”)
 005 }
 006 container.shuffleLetters();
 007 }
 008 shuffle(“page”);
 009 </script>
×