jQuery: animating text

Animating text is easy with jQuery. Let's say that we want to show the letters of an heading one at time and then apply a global, final effect to the heading itself. All we need are a couple of CSS rules and a little bit of imagination. Done that, everything will work smoothly. First, let's draw our markup structure:

<h1>
 <span class="t1">T</span>
 <span class="t2">i</span>
 <span class="t3">t</span>
 <span class="t4">l</span>
 <span class="t5">e</span>
</h1>

Each letter is contained within a span element. To make everything work faster, we've embedded such elements directly in the markup, but you can use jQuery to generate them. Then our CSS styles:

h1 {
 font: 10em Impact, sans-serif;
 padding: 0.5em;
 text-transform: uppercase;
 letter-spacing: .1em;
 background: #000;
 color: #c60;
 margin: 0 auto;
 width: 4em;
 
}

h1 span {
 display: none;
}

Since we want to apply some transition effects to the background color of our element, we need to reference the jQuery UI library as well:

<body>
<!--page contents-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js">
</script>

</body>

After setting everything up, we can use jQuery:

$(document).ready(function() {

  $('h1 span.t1').fadeIn(1500, function() {
  
  
    $(this).next().fadeIn(1500, function() {
    
    
    
      $(this).next().fadeIn(1500, function() {
      
      
      
        $(this).next().fadeIn(1500, function() {
        
        
        
          $(this).next().fadeIn(1500, function() {
          
          
          
            $('h1').animate({
              backgroundColor: '#fff',
              color: '#000',
              fontSize: '120px'
            }, 2000);
          
          
          
          });
        
        
        
        });
      
      
      
      });
    
    
    
    });
  
  
  
  
  });

});

You can see the demo below.

Demo

Live demo

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

Leave a Reply

Note: Only a member of this blog may post a comment.