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 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:
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 animateFor the text to animate, it must be placed inside of one of the following tags:
... text text text text text text text you want to animate text text text ...
... 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 ...
... 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
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):
3: In the onClick attribute of a link (will be triggered by clicking a link):
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!