PB Code Zone
Fading Background
Stop Fading
Restart Fading
Check out
Toms 357 Mag's
for more original scripts like this one.
<!-- paste the script in the head section of your page--> <script LANGUAGE="JavaScript"> <!-- var loop = 1; //0 = one time, 1 = infinite var step = 4; // the step for de- or increasing the color value which actually changes the speed var startcolor = new Array(255,153,255); var middlecolor = new Array(153,102,255); var endcolor = new Array(255,153,255); // equate the middle with end values if you do not want to use a middle color // if you use infinite loops start and end color should be the same values // DO NOT CHANGE ANYTHING BELOW HERE // (Unless you know what you do -- if you want to change the timeout factors, there are 4 of them.) var stopped = 0; var factor = new Array(1,1,1); var firstfactor = new Array(1,1,1); var secondfactor = new Array(1,1,1); var color = new Array(startcolor[0],startcolor[1],startcolor[2]); var nextcolor = new Array(middlecolor[0],middlecolor[1],middlecolor[2]); var hex = new Array; var letters = new Array('0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'); function fadestart() { for (i=0 ; i <=2 ; i++) { if (middlecolor[i] > startcolor[i]) { firstfactor[i] = -1; } if (middlecolor[i] == startcolor[i]) { firstfactor[i] = 0; } if (endcolor[i] > middlecolor[i]) { secondfactor[i] = -1; } if (endcolor[i] == middlecolor[i]) { secondfactor[i] = 0; } factor[i] = firstfactor[i]; } fadeing = setTimeout('fade()',50); } function fadestop(){ stopped = 1; clearTimeout(fadeing) } function faderestart(){ if (stopped == 1){ fadeing = setTimeout('fade()',50); } } function fade() { for (i=0 ; i<=2 ; i++) { firstletter = Math.floor(eval(color[i] / 16)); secondletter = eval(color[i] -(firstletter * 16)); hex[i] = letters[firstletter]+letters[secondletter]; color[i] = color[i] - (factor[i] * step); if (((color[i]*factor[i])-(nextcolor[i]*factor[i])) <= 0) { factor[i] = 0; color[i] = nextcolor[i]; } } document.bgColor = '#'+hex[0]+hex[1]+hex[2]; if (((Math.abs(factor[0]) + Math.abs(factor[1]) + Math.abs(factor[2])) == 0)&&((color[1] != endcolor[1])||(color[2] != endcolor[2])||(color[0] != endcolor[0]))){ for (i=0 ; i<=2 ; i++) { nextcolor[i]=endcolor[i]; factor[i]=secondfactor[i]; } } if ( (Math.abs(factor[0]) + Math.abs(factor[1]) + Math.abs(factor[2])) != 0 ){ fadeing = setTimeout('fade()',50); } else { if (loop == 1){ for (i=0 ; i<=2 ; i++) { factor[i]=firstfactor[i]; color[i]=startcolor[i]; nextcolor[i]=middlecolor[i]; } fadeing = setTimeout('fade()',50); } } } //--> </script> </head> <BODY BGCOLOR="#000000" TEXT="#ffffff" LINK="#0000ff ALINK="#6699ff" VLINK="#003399" onLoad="fadestart();"> <div align="center"><FONT FACE="Arial" size="5"><B>TITLE OF YOUR SITE</B></font><br><br><font size="4">Fading Background<br><br> <br><br> <a href="javascript:fadestop();">Stop Fading</a> <a href="javascript:faderestart();"> Restart Fading</a> </BODY></HTML> ____________________________________________ <!--The code above is complete, this info is here in case you'd like to edit the code.--> <!--Include this command in your body tag onLoad="fadestart();" --> <!-- Use these to stop and start. They are not necessary for the script to run. <a href="javascript:fadestop();">Stop Fading</a> <a href="javascript:faderestart();"> Restart Fading</a> -->
TIP ~ To Fade a background jpg or gif take it to Image Magic and choose "enhance". Put a % in the parameter box, usually somewhere between 2% and 10% works well, with 10 being the most faded. Click on "gamma" then "enhance".
