Create shuffling text effects with jQuery

Add a special effect to your text to impress and engage visitors


Add a special effect to your text to impress and engage visitors



Portfolio websites for web designers and front-end developers are a really great place to show off their own work. With no clients to dictate the look, content or styling of the site, it presents the designer with an opportunity to carve out their own unique style.

This has been the case for Shogo Tabuchi who has created a CSS animated masterpiece with This website has everything from jittery, glitch-like text effects to 3D background panels that move to new locations every five seconds or so. Even the menu unfolds and animates in a very stylish way to reveal the menu items on the right-hand side.


Body content

In the body section of the page add some content to work with. There needs to be a div on the outside, which is named ‘wrapper’ and a div on the inside that has been named ‘jitter’. Notice we also have a link as this makes a great rollover effect for text.

001 <div class="wrapper">
002 <div class="jitter"><a href="#" id="text">Hello World</a></div>
003 </div>

Link the code libraries

In the head section of the page, add in links to jQuery and to the locally hosted Character Cycle plugin that is available for download from It is also included in the project folder on FileSilo.

001 <script type="text/javascript"     src="    libs/jquery/1.6.2/jquery.min.js"></    script>
002 <script type="text/javascript"     src="jquery.charCycle.0.0.1.js"></    script>

Add jQuery

Now while still in the head section of the document add the script tags and jQuery code that will check when the document is ready. This will then start the jitter effect on the text when the mouse is hovering over the text.

001 <script>
002     $(document).ready(function(){
003     $('.jitter').mouseenter(function()    {
004     if($(this).hasClass('cycling')==false){
005     $(this).charcycle({'target':'#text'});
006     }
007     });
008     });
009     </script>

Style the basics

Move on to creating the stylesheet now and this can be done either in an external stylesheet or in the head section. The page is given a black background with both the body and ‘wrapper’ div being made to fit the 100% height of the browser.

001 <style>
002     html, body{ background-color:#000; color: #fff; height: 100%;}
003     .wrapper{ height: 100%;}         

Style the content

The final styling makes the jitter centrally aligned inside the wrapper div element. Here the link text is made a little bigger, while having a white, italic styling applied to it. Save the page now and view it in the browser, roll your mouse over the text to see the effect.

001 .jitter{
002     height: 100px; position: relative;
003     top: 50%; transform:translateY(-50%);
004 text-align: center;
005 }
006 a {color: #fff; text-decoration:none; font-style: italic; font-size:60px;}
007     </style>