Rainbow Glow Text Animation :: RV's free DHTML and JavaScript text and graphic effects

RAINBOW GLOW TEXT EFFECT

This script has been tested on and shown to work with the following browsers: Internet Explorer version 5 and above Google Chrome version 1 and above Mozilla Firefox version 1 and above Apple Safari version 3 and above Opera version 7 and above (including Opera mobile) Android Browser version 2 and above

29-May-2013: Minor improvements. 22-Jul-2012: Added the option for the text to glow. 29-Sep-2005: Added the option for the text to be a link and removed support for Internet Explorer 4.
STEP 1: Copy and paste the code below so that it sits between the <head> and </head> tags at the top of your web-page: <script type="text/javascript"> // <![CDATA[ var speed=100; // speed colours change, 1 second = 1000 var glow=3; // can be set from '0' for no glow, to 10 var raincol=new Array("#ff0000", "#ff5500", "#ffaa00", "#ffff00", "#aaff00", "#55ff00", "#00ff00", "#00ff55", "#00ffaa", "#00ffff", "#00aaff", "#0055ff", "#0000ff", "#5500ff", "#aa00ff", "#ff00ff", "#ff00aa", "#ff0055"); // change the colours if you want to var alink="http://www.mf2fm.com/rv/"; // page to link text to (set to ="" for no link) /**************************** * Rainbow Text Effect * (c)2003-13 mf2fm web-design * http://www.mf2fm.com/rv * * DON'T EDIT BELOW THIS BOX * ****************************/ var rainbow, raintxt, raincnt=0; function addLoadEvent(funky) { var oldonload=window.onload; if (typeof(oldonload)!='function') window.onload=funky; else window.onload=function() { if (oldonload) oldonload(); funky(); } } addLoadEvent(regenbogen); function regenbogen() { if (document.getElementById) { var i, rainbeau; rainbow=document.getElementById("rainbow"); raintxt=rainbow.firstChild.nodeValue; while (rainbow.childNodes.length) rainbow.removeChild(rainbow.childNodes[0]); for (i=0; i<raintxt.length; i++) { rainbeau=document.createElement("span"); rainbeau.setAttribute("id", "rain"+i); rainbeau.appendChild(document.createTextNode(raintxt.charAt(i))); if (alink) { rainbeau.style.cursor="pointer"; rainbeau.onclick=function() { top.location.href=alink; } } rainbow.appendChild(rainbeau); } rainbow=setInterval ("raining()", speed); }} function raining() { var i, c; for (i=0; i<raintxt.length; i++) { c=raincol[(i+raincnt)%raincol.length]; document.getElementById("rain"+i).style.color=c; if (glow) document.getElementById("rain"+i).style.textShadow=c+" 0px 0px "+glow+"px"; } raincnt++; } // ]]> </script> CLICK HERE to select the above script ready to paste it into your clipboard
STEP 2: Place a <span> element with 'id="rainbow"' on your web-page containing the text you wish to be turned into a rainbow. For example: Don't include anything other than text between the <span> tags.
STEP 3: Decide how much you want your text to glow by changing the value of 'glow' at the start of the script. Choose the speed of the animation and whether you want the text to act as a link. You can even change the colours if you want.
THAT'S IT When your page loads, the text you placed between between the <span> tags should be turned into a rainbow of colours, like the text at the top of this page.

Copyright notice: All scripts are © copyright mf2fm.com. You can use them wherever and whenever you wish, however the copyright notice at the start of the script should remain intact and a link back to this page would be appreciated. The address for this page is: http://www.mf2fm.com/rv/dhtmlrainbow.php.

This page has been viewed 994 times. It was last viewed on Thu 25 Apr, 2024 at 16:12