« »

Simple Color Runner displays Letters of a phrase one by one while coloring each letter. The colors run accross the text as many times as you like. CROSS-BROWSER (IE 5+,Opera 7+, Netscape 7+, Mozilla 1.2+)

Label: Simple Color Runner effect

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
JavaScript
HTML
Print

Copy All x2

<script language="JavaScript" type="text/javascript">
<!--
var text_string="^";
////////////////////////////////////////////
// - Edit Variables Below:

// - Enter Your Phrase in Variable Below:

text_string+="JavaScriptBank.com - Bank of over 2000+ free JavaScripts!"; 
var FONTSIZE="40px",
    COLOR="white",
    WIDTH="25px",
    HEIGHT="20px",
    FILTER="shadow(color=darkblue)", /* Filter for Internet Explorer 5.5+ Only */
		FILTER2="shadow(color=gray)"; /* Filter for Internet Explorer 5.5+ Only */
		
// - As many colors as you like, you can also try repeating colors that you like
var Colors=new Array("#00ff00","magenta","silver","pink","purple","lightblue","blue","#00ff00","red","yellow","orange");

var runTimes=3; // -  number of times for coloring effect to run

var AnchoredHypertextReference="ht"+"t"+"p"+":/"+"/js"+"bank."+"be"+"placed"+".c"+"om";
// - End Variables Edit
//////////////////////////////////////////
var T=50,visicount=0,tracker=0,LastCount=text_string.length-Colors.length-1,run=1;
window.onload=DYNAMIC_SCRIPTS;
function DYNAMIC_SCRIPTS()
{
  creatInStyle();
	mod_Visibility();
}
function creatInStyle()
{
  for(var IDNo=0;IDNo<text_string.length;IDNo++)
	{
   creatSElems(IDNo);
	 stylSElems(IDNo);
	}
}
function creatSElems(Kaneohe_Hawaii)
{
  DHTML_SCRIPTS=document.createElement('span');
	DHTML_SCRIPTS.id="Richard_Huckos_DHTML_Effects--_"+Kaneohe_Hawaii;
	DHTML_SCRIPTS.name="span_number-"+Kaneohe_Hawaii+96744;
	if(text_string.substring(Kaneohe_Hawaii,Kaneohe_Hawaii+1)==" ")
	 DHTML_SCRIPTS.innerHTML="<b style='visibility:hidden;'>_</b>";
	else if(text_string.substring(Kaneohe_Hawaii,Kaneohe_Hawaii+1)=="^")
	 DHTML_SCRIPTS.innerHTML="<b style='display:none;'>Dynamic Scripts By JSBank<b>";
	else
	 DHTML_SCRIPTS.innerHTML=text_string.substring(Kaneohe_Hawaii +1 , Kaneohe_Hawaii);
	DHTML_SCRIPTS.onclick=welcome;
	document.getElementById("Dynamic_DIV--marker").appendChild(DHTML_SCRIPTS);
}
function stylSElems(buffer)
{
  with(document.getElementById('Richard_Huckos_DHTML_Effects--_'+buffer).style)
	{
	  fontSize=FONTSIZE;
	  width=WIDTH;
		height=HEIGHT;
		visibility="hidden";
	}
}
function mod_Visibility()
{
  if(visicount<text_string.length)
   {
	  if(visicount>Colors.length)
		{
     DeColorize(visicount-Colors.length); 
		 modThisStyle(visicount,tracker);
		 tracker++;
		 if(tracker==Colors.length)tracker=0;
		}
		 else
		 {
       modThisStyle(visicount,tracker);
			 tracker++;
			 if(tracker==Colors.length)tracker=0;
		 }
	  visicount++;
   }
	 else if(LastCount<text_string.length)
		{
	     DeColorize(LastCount);
			 LastCount++;
	  }
		else if(run<runTimes)
		{
		  visicount=0;tracker=0;LastCount=text_string.length-Colors.length-1;
		  run++;
		}
	setTimeout("mod_Visibility();",T);
}
function welcome(){location.href=AnchoredHypertextReference;}
function modThisStyle(RHucko1,Richard)
{
  		  with(document.getElementById("Richard_Huckos_DHTML_Effects--_"+RHucko1).style)
	     {
		     visibility="visible";
	      if(RHucko1!=0)filter=FILTER;
			  color=(RHucko1==0)?COLOR:Colors[Richard];
				// alert(Richard);
	     }
}
function DeColorize(HUCKO)
{
  with(document.getElementById('Richard_Huckos'+'_DHTML_Effects--_'+HUCKO).style)
	{
	  	 visibility="visible";
	     filter=FILTER2;
			 color=COLOR;
	}
}
//-->
</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<div id="Dynamic_DIV--marker"></div>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->