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.