Animated Text Script
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 knoweledge. With flooble's Animated Text Script, the power to quickly animate simple text is back in the hands of a common 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 the new Opera 7 does.) And the best part is - it's free to use.
Here are the simple to follow instructions to use this code on your page/site:
Step 1: Get the code...Copy the following code, and paste it somewhere in yout 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.
If you have questions or comments, please post them here, and we will do our best to help you.