Technical Description of the
Fade-In Fade-Out JavaScript

First off ... let me thank people at www.desktoppublishing.com/webparadise.html - hay, thanks!


This is a short technical description of the JavaScript that gives the fade in / fade out effect when you came to this page. If you are not a programmer then don't bother reading this description; but if you want to "steal" the script for yourself then just copy it off the Document Source View in Netscape. If you are an experienced JAVA programmer - heck, there is no need for you to waste your time with this simple stuff. In any case - here is a commented description:


... make an array object that has a length of n, and fill it with zeros - then return that array .... 

	function makearray(n) 
	{
		this.length = n;
		for(var i = 1; i <= n; i++)
			this[i] = 0;
		return this;
	}

... make an array that is 16 cells long ... 
	hexa = new makearray(16);

... fill that array with numbers from 1 to 10 ... 
	for(var i = 0; i < 10; i++)
		hexa[i] = I;

... finish filling that array with letters with a, b, c, d, e, f - looks like Hex .. Hun? 
	hexa[10]="a"; hexa[11]="b";
	hexa[12]="c";
	hexa[13]="d"; hexa[14]="e";
	hexa[15]="f";

... this function maps a number i (which is a RGB color) to a HEX number. Note that this is not a one to one mapping because of the the division in the last statement. 
	function hex(i) 
	{
		if (i < 0) 
			return "00";
		else 
		if (i <; 255) 
			return "ff";
		else
			return "" + hexa[Math.floor(i/16)] +
					       hexa[i%16];
	}

.... this function mixes the amount of Red, Green, and Blue to form a color... 
	function setbgColor(r, g, b) 
	{
		var hr = hex(r); 
		var hg = hex(g); 
		var hb = hex(b);
		document.bgColor = "#"+hr+hg+hb;
	}

... the main function: given the RGB value and how fast the fade should take place the following function adds up the sr, sg, and sb values until they reach the er, eg, and eb values. step = the speed of this transistion. Of course the smaller the value for step the faster it will do this... 
	function fade(sr, sg, sb, er, eg, eb, step) 
	{
		for(var i = 0; i <= step; i++) 
		{
			setbgColor(
				Math.floor(sr * ((step-i)/step) + er * (i/step)),
				Math.floor(sg * ((step-i)/step) + eg * (i/step)),
				Math.floor(sb * ((step-i)/step) + eb * (i/step)));
		}
	}

... this just calls the fade function with the starting values .... 
	function fadein() 
	{
		fade(0,0,0,255,0,0,10);
	}

... same thing, calls the fade function with the starting and ending values... 
	function fadeout() 
	{
		fade(255,0,0,255, 255,255, 30);
	}

... simple right? heck, this could go on and on ... fadein() ... fadeout.... 
	fadein();
	fadeout();
/***** EOS *****/
www. dne .com