DHTML JavaScript Bar Animator cut paste code, random colors with two different fade gradient-effects.

Bar Animator, random colors
Create animated bars fading through a set of random colors. Add as many horizontal or vertical bars as you like. Easy configuration of width, length, speed, fade-effect and gradient-effect. Two different gradient-effects for IE5x. Standard effect for NS6x/7x and Opera7x. Brought to you by www.24fun.com

Bar Animator, selectable colors
Click here if you prefer to apply selectable colors.

Configuration:

Step 1: Open your web page. Paste the following code between the <head> and </head> tags of your web page:

// IMPORTANT: 
// If you add this script to a script-library or a script-archive 
// you are required to insert a highly visible link to http://www.24fun.com
// right into the webpage where the script
// will be displayed.

///////////////////////////////////////////////////////////////////////////
// CONFIGURATION STARTS HERE
///////////////////////////////////////////////////////////////////////////

// Select fade-effect below:
// Set 1 if the background may fade from dark to medium 
// Set 2 if the background may fade from light to medium 
// Set 3 if the background may fade from very dark to very light light
// Set 4 if the background may fade from light to very light
// Set 5 if the background may fade from dark to very dark 
var fade_effect=3

// Set speed (higher=slower)
var speed=20

///////////////////////////////////////////////////////////////////////////
// CONFIGURATION ENDS HERE
///////////////////////////////////////////////////////////////////////////
var gradient_effect=new Array()
var flipcol=new Array()
var gr_effect=1
var i_barcount=0
var browserinfos=navigator.userAgent 
var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all
var opera=browserinfos.match(/Opera/)  
var browserok=ie5||ns6||opera

if (fade_effect==1) {
	var darkmax=1
	var lightmax=127
}
if (fade_effect==2) {
	var darkmax=127
	var lightmax=254
}
if (fade_effect==3) {
	var darkmax=1
	var lightmax=254
}
if (fade_effect==4) {
	var darkmax=190
	var lightmax=254
}
if (fade_effect==5) {
	var darkmax=1
	var lightmax=80
}
var hexc = new Array('0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F')

var newred
var newgreen
var newblue
var oldred
var oldgreen
var oldblue

var redcol_1
var redcol_2 
var greencol_1 
var greencol_2 
var bluecol_1 
var bluecol_2 
var oldcolor
var newcolor
var newcolorCompl
var firsttime=true
 
var stepred=1
var stepgreen=1
var stepblue=1

function setrandomcolor() {
	var range=(lightmax-darkmax)
	if (firsttime) {
		newred=Math.ceil(range*Math.random())+darkmax
		newgreen=Math.ceil(range*Math.random())+darkmax
		newblue=Math.ceil(range*Math.random())+darkmax
		firsttime=false
	}
	
	oldred=Math.ceil(range*Math.random())+darkmax
	oldgreen=Math.ceil(range*Math.random())+darkmax
	oldblue=Math.ceil(range*Math.random())+darkmax
	
	stepred=newred-oldred
	if (oldred>newred) {stepred=1}
	else if (oldred<newred) {stepred=-1}
	else {stepred=0}
	
	stepgreen=newgreen-oldgreen
	if (oldgreen>newgreen) {stepgreen=1}
	else if (oldgreen<newgreen) {stepgreen=-1}
	else {stepgreen=0}
	
	stepblue=newblue-oldblue
	if (oldblue>newblue) {stepblue=1}
	else if (oldblue<newblue) {stepblue=-1}
	else {stepblue=0}
	fadebg()
}

greencol_1 = hexc[Math.floor(newred/16)];
     	greencol_2 = hexc[newred%16];
	 	bluecol_1 = hexc[Math.floor(newgreen/16)];
      	bluecol_2 = hexc[newgreen%16];
	  	redcol_1 = hexc[Math.floor(newblue/16)];
      	redcol_2 = hexc[newblue%16];
		newcolorCompl="#"+redcol_1+redcol_2+greencol_1+greencol_2+bluecol_1+bluecol_2

for (i=0;i<=i_barcount-1;i++) {
			if (ie5 && gradient_effect[i]!="none") {
			if (gradient_effect[i]=="horizontal") {gr_effect=1}
			if (gradient_effect[i]=="vertical") {gr_effect=0}
				if (flipcol[i]=="yes") {
					document.getElementById('anibar'+i).style.filter=
"progid:DXImageTransform.Microsoft.Gradient(startColorstr="+newcolorCompl+", endColorstr="+newcolor+" GradientType="+gr_effect+")"
				}
				else {
					document.getElementById('anibar'+i).style.filter=
"progid:DXImageTransform.Microsoft.Gradient(startColorstr="+newcolor+", endColorstr="+newcolorCompl+" GradientType="+gr_effect+")"
				}
			}
			else {
				if (flipcol[i]=="yes") {
	  				document.getElementById('anibar'+i).style.backgroundColor=newcolor 
				}
				else {
					document.getElementById('anibar'+i).style.backgroundColor=newcolorCompl 
				}
			}
		}
		var timer=setTimeout("fadebg()",speed);
    } 
  	else {
  		clearTimeout(timer)
		newred=oldred
		newgreen=oldgreen
		newblue=oldblue
		setrandomcolor()
  	}
}

function addbar(barwidth,barheight,gradienttype,flipcolor) {
	if (browserok) {
		gradient_effect[i_barcount]=gradienttype
		flipcol[i_barcount]=flipcolor

document.write('<table border=0 cellpadding=0 cellspacing=0 width='+barwidth+' height='+barheight+' border=0><tr><td><div id="roof'+i_barcount+'" style="position:relative;width:'+barwidth+'px;height:'+barheight+'px;"><div id="anibar'+i_barcount+'" style="position:absolute;top:0px;left:0px;width:'+barwidth+'px;height:'+barheight+'px;"><img src="empty.gif" width='+barwidth+' height='+barheight+'></div></div></td></tr></table>')
		i_barcount++
	}
}

if (browserok) {
	window.onload=setrandomcolor
}
</script>

Step 2: Open your web page. Go to the top of the script-code and configure the fade-effect and speed.

Step 3: Open your web page. Paste the code inside the yellow box where you wish to add an animated bar (add as many as you like).
Then set the 4 attributes inside the brackets according to the colorized explanations:

<script>addbar(500,3,"horizontal","yes")</script>

red attribute: the width of the bar (pixels).
blue attribute: the height of the bar (pixels).
green attribute: the type of gradient effect for IE 5x/6x. Acceptable values are "horizontal" or "vertical" or "none".
brown attribute: color switcher. Acceptable values are "yes" or "no".

Step 4:

Save the small rectangle on the left as "empty.gif".
Put it into the same folder as the web page
that contains your animated bar(s).