<HTML>
<head>
<title>The Scroll/Credits demo</title>
<script>

	////////////////////////////////////////////////////////////////////////////////
	// Produced by Marcio Galli for Netscape Communications.
	// Uses DOM 1 to dynamically create a set of text elements.
	// Then animates it producing a scroll effect. 
	//
	// References: 
	//
	// http://www.mozilla.org/docs/dom/technote/tn-dom-table/index.html
	// http://dmoz.org/Computers/Programming/Languages/JavaScript/W3C_DOM/
	// http://www.geckonnection.com
	//
	creditList= new Array(
		"DOM 1 Scroll Effect",
		"",
		"by mgalli",
		"",
		"Component of",
		"DOM/CSS Font Family Demos",
		"",
		"starring",
		"DOM Level 1",
		"DOM Level 2",
		"JavaScript",
		"Cascading Style Sheets",
		"new W3C Standards",
		"Gecko Layout Engine / NGT",
		"",
		"thanks to",
		"mozilla.org",
		"geckonnection.com",
		"taboca.com",
		"netscape.com",
		"w3c.org",
		"",
		"featuring",
		"animation",
		"visual effects",
		"dynamic control",
		"dynamic creation",
		"and more",
		":-)",
		"",
		"Find more info",
		"at",
		"DMOZ.ORG [W3C DOM] Category",
		"",
		"Filmed for the Web",
		""

		 );

	//-------------------------------------------------------------------------------------
	// start function 
	//
	// This function is called when the page is loaded. 
	// See the onload="start()" attribute in the body tag. 
	//
	function start() {

		nodeCredits=document.getElementById("credits");

		ww=window.innerWidth;		// ww receives the window.innerWidth
		hh=window.innerHeight;		// hh receives the window.innerHeight

		createDivs(creditList);

		// Note: the height attribute have the size of the screen height area.
		// Also the overflow attribute is set to hidden. 
		//
		if (navigator.userAgent.indexOf("Gecko")>-1)
			nodeCredits.setAttribute("style","position:absolute;top:"+hh+"px;left:0px;width:"+ww+";height:"+0+";font-size:15px;overflow:hidden;");
		else
			nodeCredits.style.cssText = "position:absolute;top:"+hh+"px;left:0px;width:"+ww+";height:"+0+";font-size:15px;overflow:hidden;";
		
		o1=document.getElementById("credits");
		scroll();
	}

	/////////////////////////////////////////////////////////////////////////////////
	// Global variables used for the scroll animation 
	// 
	o1=null;			// stores the object reference. 
	ttt=0;				// stores position. 
	hhh=0;				// stores position. 
	hh=0;				// window.innerHeight size.

	/////////////////////////////////////////////////////////////////////////////////
	// Scroll first step 20/1000*second. It moves the top position for the o1
	// element and call scroll2...
	//
	function scroll() {
		ttt=parseInt(o1.style.top);
		if (isNaN(ttt))
			ttt = 0;
		ttt-=2;
		o1.style.top=ttt+"px";
		setTimeout("scroll2()",20);

	}

	precounter=0;		// aux counter. 
	fadeout_on=false;	// aux Flag.
	fadein_on=false;	// aux Flag 
	iid=0;			// aux used to index elements. 
	iii=0;			// aux generic counter
	iii2=0;			// aux generic counter
	iid2=0;			// aux used to index elements. 
	ccc=0;			// aux used to set color
	ccc2=255;		// aux used to set color

	/////////////////////////////////////////////////////////////////////////////////
	// Scroll second step 20/1000*second. It increases the height size for the o1
	// element and call scroll...
	//
	// This second scroll function takes care of the fade in and fade out color 
	// effect. 
	//
	function scroll2() {

		// Increases the size of the height property. 
		//
		hhh=parseInt(o1.style.height);
		if (isNaN(hhh))
			hhh = 0;
		hhh+=2;
		o1.style.height=hhh+"px";	

		//////////////////////////////////////////////////////////////////////////
		// Now is the color that works with color to simulate a fade in / fade out
		// effect. 
		
		// Wait twenty cicles to start fading in. 
		//
		precounter++;
		if(precounter>20) {
			fadein_on=true;
		}

		// If fadein mode is on, 
		//
		if(fadein_on) {

			// must verify if the element is valid.
			//
			if(iid<creditList.length) {
				// Gets the element..
				pieceofText=document.getElementById("textobject"+iid);
				// Changes the color (ccc from 000 to 255..)
				pieceofText.style.color="rgb("+ccc+","+ccc+","+ccc+")";
				ccc+=17;	
			}
			// increases one fadein cycle. 
			iii++;	
		
			// Each 15 cycles, next element must fade in...
			if(iii>15) {
				iii=0;		// fade in cycle counter=0
				ccc=0;		// resets color to 0
				iid++;		// next element index. 
			}
		}


		// Same thing but now for the fadeout system. 
		// Waits the first element to be next to the top to start fadeing out.
		//
		o1top=parseInt(o1.style.top);
		if (isNaN(o1top))
			o1top = 0;

		if(o1top<(60)&&fadeout_on==false) {
			fadeout_on=true;
		}

		// So...
		if(fadeout_on) {

			// must verify if the element is valid.
			//
			if(iid2<=creditList.length) {
				pieceofText2=document.getElementById("textobject"+iid2);
				if (pieceofText2)
					pieceofText2.style.color="rgb("+ccc2+","+ccc2+","+ccc2+")";
				ccc2-=17;  		// decreases the color value. 
			}
			iii2++;				// increases the fade out cycle 
							// counter. 

			if(iii2>15) {			// When number of cycles is 15,
				iid2++;			// set index to next element. 
				ccc2=255;		// reset color to 255.
				iii2=0;			// reset cycle counter to 0.
			}
		}

		// warning bug - it continues scrolling forever. 
		setTimeout("scroll()",20);
	}

	//////////////////////////////////////////////////////////////////////////////
	// Creates credit divs inside credits div. 
	//
	ii=0;
	function createDivs(list) {
		node=document.getElementById("credits");
		toppos=0;	
		beforediv2=document.createElement("CENTER");
		node.appendChild(beforediv2);
		for(i=0;i<list.length;i++) {
			beforediv=document.createElement("DIV");
			if (navigator.userAgent.indexOf("Gecko")>-1)
				beforediv.setAttribute("style","position:relative;color:black;font-size:20px");
			else
				beforediv.style.cssText = "position:relative;color:black;font-size:20px";
			beforediv.setAttribute("id","textobject"+ii);
			ii++
			insidediv=document.createTextNode(list[i]);
			beforediv.appendChild(insidediv);
			insidediv=document.createElement("BR");
			beforediv.appendChild(insidediv);

			beforediv2.appendChild(beforediv);

		}
	}

</script>
</head>
<body onload="start()" bgcolor="black" color="white">

<div id="credits" style="position:absolute;color:white">
</div>

</body>
</HTML>