All about flooble | Get a free chatterbox | Make the web your notepad | logic problems / brain teasers | random fun stuff
Also check out: Peeptin minigame | Toggler minigame | Color Picker | More
Animated Text Script
(comments)

Flooble's Animated Text Script will allow you to have 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 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:

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 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 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 ...

Or

... 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.

If you have questions or comments, please post them here, and we will do our best to help you.

We spent 3 full days creating this script.
If you found it useful, please consider donating a few of dollars to show your support:




Copyright © 2002 - 2004 by Animus Pactum Consulting. All rights reserved.