<html>
<head>
<title>DOM, CSS and Fonts - Sample Code: Animating Fonts with DOM</title>
<script language="javascript" src="../../../web-developer/sniffer/browser-type.js"></script>
<script>

	////////////////////////////////////////////////////////////////////////////////
	// Produced by Marcio Galli for Netscape Communications.
	// Uses DOM 1 and CSS to change color. 
	//
	// 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
	//
	// This is a basic color fade in effect. There are 6 elements in the HTML 
	// section at the end of this document. Each one is a div that contains 
	// a text node. When the page is loaded, the colorfade animation procedure is called. 
	//
	// It moves the text whose id is "text"+el to the right and at the same
	// time changes the color from white (255,255,255) to gray.
	// When both the background and the text are white (255,255,255), 
	// it creates a transparency effect.
	//

	///////////////////////////////////////////////////////////////////////////////////////
	// Variables used as parameters for the animation. 
	// 
	cc=20;			// Number of frames in the animation.
	aa=255;			// Initial value used as color parameter for Red, Green and Blue channels. 
	tt=0;			// Aux counter - the left position of the element. 
	el=0;			// Index of the element. 

	function colorfade() {
		
		// Animates until cc >0. It's an animation in 20 steps. Note that cc was initialized with 20. 
		if(cc>0) {
			tt+=cc;			// tt value increased by cc. NOTE that 
						// tt value is used to update the left position. 
						// It's using the acceleration approach. In the beginning 
						// the position is updated by high values (20,19,18..)
						// and in the end it's updated by low values (4,3,2..).
						
			// It will produce a gradual slowing effect. 

			// Sets the left position using tt parameter. 
			document.getElementById("text"+el).style.left=tt+"px";

			// aa color value. Decreasing by 5 units. 
			aa-=5;

			// Sets the color value. 
			document.getElementById("text"+el).style.color="rgb("+aa+","+aa+","+aa+")";

			// Decreases the animation counter. 
			cc--;

			// Call colorfade again...
			setTimeout("colorfade()",20);
	
		} else {
			// Reset all animation parameters except the el index. 
			cc=20;
			aa=255;
			tt=0;
			// Call again the colorfade procedure increasing the el index until all 
			// elements (see HTML section bellow) are animated. The last element animated
			// is the sixth element. 
			if(el<5) {
				el++;
				setTimeout("colorfade()",20);
			}
		}
	}
</script>
</head>
<body onload="colorfade()" bgcolor="white">
<div id="text0" style="position:absolute;left:0px;top:0px;color:rgb(255,255,255);font-size:16pt;">
Gecko
</div>

<div id="text1" style="position:absolute;left:0px;top:20px;color:rgb(255,255,255);font-size:16pt;">
Technology
</div>

<div id="text2" style="position:absolute;left:0px;top:40px;color:rgb(255,255,255);font-size:16pt;">
Text
</div>

<div id="text3" style="position:absolute;left:0px;top:60px;color:rgb(255,255,255);font-size:16pt;">
Transitions
</div>

<div id="text4" style="position:absolute;left:0px;top:80px;color:rgb(255,255,255);font-size:16pt;">
Fades
</div>

<div id="text5" style="position:absolute;left:0px;top:100px;color:rgb(255,255,255);font-size:16pt;">
without opacity
</div>
</body>
</html>