Color Animated Text

This Color Animated Text Script will allow you to have subtle but attention grabbing text in your pages that is both easy to read and not annoying. Making text bold makes it stand out a little in your page, but sometimes that's just not enough. In the early days of the web, page makers used the <BLINK> tag to draw attention to text, but pretty soon, it became apparent that this wasn't a very good idea. After all, if you want people to read your text so badly, having it disappear for brief periods of time is hardly smart.

So, whenever something needed to really grab attention, designers had turned to using animated images and flash. However both of these options require some special software to create, as well as a considerable amount of knowledge. With this Color Animated Text Script, the power to quickly animate simple text is back in the hands of any web designer.

First, let's look at a sample of the script at work:

This text is animating. Can you see it?

As you can see, the text is eye-catching without being distracting. The script works by highlighting one letter of the text at a time, in a back and forth pattern. The script has been tested to work with the newer versions of Internet Explorer and Mozilla/Netscape. (Opera 6 seems to not support it, but Opera 7 and newer does.) And the best part is that although a spectacular script, it is at no cost.

Here are the simple to follow instructions to use this code on your page/site:

Step 1: View the source and get the code, or cut and paste below...

Copy the following code, and paste it somewhere in your page (preferably inside of the <HEAD> tag).

Step 2: Outline the text to animate

For the text to animate, it must be placed inside of one of the following tags:

<SPAN>
<DIV>
<TD> (a table cell)

If the text you want to animate is not in one of these tags, you need to surround it with a <SPAN> tag:

... text text text text text text text you want to animate text text text ...

Becomes

... text text text text text text <SPAN>text you want to animate</SPAN> text text text ...

The same applies if you want to animate only part of the text inside a <DIV> or a <TD>: you need to surround only the text you wish to animate with a <SPAN> tag.

Step 3: Identify the text

Next, you must give the tag containing the text you wish to animate an ID. This is simply some unique identifier that will allow the script to find the tag inside of your page. It can be any word or number, as long as it is unique within the page. To specify the ID for a tag, you need to add ID="Your ID" to the opening part of that tag.

For example to add the ID "animate" to the tag shown above, we would change the code as follows:

... text <SPAN>text you want to animate</SPAN> text ...

Becomes

... text <SPAN ID="animate">text you want to animate</SPAN> text ...

Adding an ID to a <DIV> or a <TD> is very similar:

... text <DIV ID="animate">text you want to animate</DIV> text ...

... text <TD ID="animate">text you want to animate</TD> text ...

Step 4: Activate the animation

Finally, to activate the animation you must call the animate() function. This JavaScript function takes two arguments: animate(tagId, color), where

tagId is the ID you set to your tag in Step 3.
color is the color for the highlighted letter to turn to

If we wanted the text in the example above to animate with a white color, we would call animate('animate', '#FFFFFF'). This can be done in three ways:

1: In <BODY> tag's onLoad attribute (recommended):
<BODY onLoad="animate('animate', '#FFFFFF');">
...

2: Somewhere in the page (this code should appear after the text to be animated):
<SCRIPT language="JavaScript">
animate('animate', '#FFFFFF');
</SCRIPT>

3: In the onClick attribute of a link (will be triggered by clicking a link):
<A HREF="#" onClick="animate('animate', '#FFFFFF');">Click To Animate</A>

Additional Tips

You can animate multiple bits of text on the same page by repeating Steps 2 - 4 for each piece of text. Keep in mind however, that animating a lot small bits of text, or animating large bodies of text will probably slow down your visitors' computers.

The animation effect is more visible on text that is BOLD. It is a good idea to pick a highlight color that is similar to the original color of the text, but also different enough to stand out a little. This will give you the effect of subtle motion that will attract attention without being annoying. Use and enjoy!