Animate your text - JavaScript

Animate your text - Script

Animate your text - Script will allow you to have attention grabbing text in your pages that is both easy to read and not annoying.
If your text is bold it makes it stand out a little in your page, but sometimes that is just not enough. You can see from the example on the right the text is eye-catching without being distracting. This script works by highlighting one letter of the text at a time, in a backward and forward motion.

Example:

Text you want to animate

Follow the editing instructions after the // and within the 
to customize the script, then copy and paste it into your HTML editor.

***** STEP 1 *****

<SPAN ID="animate"><B>Text you want to animate</B></SPAN>
<SCRIPT language="JavaScript">
animate('animate', '#ff8000');
</SCRIPT>
<p><font face="arial" size="-2">Javascripts provided</font><br><font face="arial, helvetica" size="-2"> by <a href="http://rainbow.arch.scriptmania.com/scripts/">Rainbow Arch</a></font></p>

***** STEP 2 *****

<SCRIPT language="JavaScript"  type="text/javascript">
/*
Animate your text - Script
Visit http://rainbow.arch.scriptmania.com/scripts/
 for this script and many more
*/
        var ie4 = false;
        if(document.all) {
                ie4 = true; 
        }       
        function setContent(name, value) {
                var d;  
                if (ie4) { 
                        d = document.all[name];
                } else {
                        d = document.getElementById(name);
                }       
                d.innerHTML = value;    
        }

function getContent(name) {
		var d;
                if (ie4) {
                        d = document.all[name];
                } else {
                        d = document.getElementById(name);
                }
                return d.innerHTML;
	}

function setColor(name, value) {
                var d;  
                if (ie4) { 
                        d = document.all[name];
                } else {
                        d = document.getElementById(name);
                }
                d.style.color = value;  
        }

function getColor(name) {
                var d;
                if (ie4) {
                        d = document.all[name];
                } else {
                        d = document.getElementById(name);
                }
                return d.style.color;
        }

function animate(name, col) {
		var value = getContent(name);
		if (value.indexOf('<span') >= 0) { return; }
		var length = 0;
                var str = '';
		var ch;
		var token = '';
		var htmltag = false;	
                for (i = 0; i < value.length; i++) {
			ch = value.substring(i, i+1);
			if (i < value.length - 1) { nextch = value.substring(i+1, i+2); } else { nextch = ' '; }
			token += ch;
			if (ch == '<' && '/aAbBpPhHiIoOuUlLtT'.indexOf(nextch) >= 0) { htmltag = true; }
			if (ch == '>' && htmltag) { htmltag = false; }
			if (!htmltag && ch.charCodeAt(0) > 30 && ch != ' ' && ch != '\n') {		
                        	str += '<span id="' + name + '_' + length + '">' + token + '</span>';
				token = '';
				length++;
			}
                }
                setContent(name, str);
                command = 'animateloop(\'' + name + '\', ' + length + ', 0, 1, \'' + col + '\')';
                setTimeout(command , 100);
        }

function animateloop(name, length, ind, delta, col) {
		var next = ind + delta;
		if (next >= length) { delta = delta * -1; next = ind + delta; }
		if (next < 0) { delta = delta * -1; next = ind + delta; }
                setColor(name + '_' + ind, getColor(name + '_' + next));
                setColor(name + '_' + next, col);
                command = 'animateloop(\'' + name + '\', ' + length + ', ' + next + ', ' + delta + ', \'' + col + '\')';
                setTimeout(command , 100);
        }
</SCRIPT>