Fading Webpage background color
Published by Aslam
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.
To apply this effect on your webpage, just copy&paste below code between your
On a slower computer, the user may notice flickering of the display. Users of Netscape 4.x browsers will also notice display flicker. To disable the fading background as a workaround for Netscape 4.x browsers if desired , CHANGE THE LINE
It says that function only apply if it is not ns4 browser.
To apply this effect on your webpage, just copy&paste below code between your
<head></head> tags.
<script type='text/javascript'>
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;
}
function changebg(){
var color=new Array();
for(i=1;i<=3; i++){
(data[i].up)? data[i].current+=data[i].incr : data[i].current-=data[i].incr;
if(data[i].startup){
if(data[i].current>=data[i].end){ data[i].up=false; data[i].current=data[i].end}
if(data[i].current<=data[i].beg){ data[i].up=true; data[i].current=data[i].beg }
}
if(!data[i].startup){
if(data[i].current<=data[i].end){ data[i].up=true; data[i].current=data[i].end}
if(data[i].current>=data[i].beg){ data[i].up=false; data[i].current=data[i].beg}
}
color[i]=data[i].current;
}
color[4]=Math.floor(color[1]).toString(16); if(color[4].length==1)color[4]='0'+color[4];
color[5]=Math.floor(color[2]).toString(16); if(color[5].length==1)color[5]='0'+color[5];
color[6]=Math.floor(color[3]).toString(16); if(color[6].length==1)color[6]='0'+color[6];
document.bgColor='#'+color[4]+color[5]+color[6];
}
window.onload=function(){
setInterval('changebg()',delay);
}
</script>
You can 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.
On a slower computer, the user may notice flickering of the display. Users of Netscape 4.x browsers will also notice display flicker. To disable the fading background as a workaround for Netscape 4.x browsers if desired , CHANGE THE LINE
setInterval('changebg()',delay);
TO
if(!ns4)setInterval('changebg()',delay);
It says that function only apply if it is not ns4 browser.
Comments
Post a Comment