Fade Background Color

Background Fader

This script changes the background color between two preset values. You can set the beginning color, the ending color, the number of color changes between the two, and the delay between changes.

Instructions:

1: Copy and paste the following script in the HEAD section of your page:
Select all...

var begcolor='#0084d8';      // STARTING COLOR AS A HEX STRING
var endcolor='#c4c4c4';      // ENDING COLOR AS A HEX STRING
var steps=50;                // TOTAL CHANGE STEPS FROM ONE COLOR TO THE OTHER
var delay=50;                // DELAY BETWEEN EACH COLOR CHANGE. LOWER IS FASTER.

//*** DO NOT EDIT BEYOND THIS POINT ***\\
var data=new Array();
var ns4=(document.layers)?true:false;
for(i=1, j=1;i<=3; i++, j+=2)data[i]=new colorset(j);
document.bgColor=begcolor;

function colorset(num){
this.beg=parseInt('0x'+begcolor.substring(num,num+2));
this.end=parseInt('0x'+endcolor.substring(num,num+2));
this.up=this.startup=(this.end>=this.beg)? true : false;
this.incr=Math.abs(this.end-this.beg)/steps;
this.current=this.beg;
}

window.onload=function(){
setInterval('changebg()',delay);

// TO DISABLE THIS EFFECT IN NS4 BROWSERS, CHANGE THE LINE
// ABOVE TO READ: if(!ns4)setInterval('changebg()',delay);
}
</script>

2: Change the beginning and ending color values in the script. There are also a couple other values you can adjust as well. Read the script for more details.

3: On a slower computer, the user may notice flickering of the display. Users of Netscape 4.x browsers will also notice display flicker. There are simple directions toward the bottom of the script on how to disable the fading background as a workaround for Netscape 4.x browsers if desired.