<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 style properties like color and font spacing. 
	//
	// 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 animation effect is divided into two parts:
	// Fade in and fade out. 

	///////////////////////////////////////////////////////////////////////////////////////
	// Variables used as parameters for the animation. 
	// 
	
	el=0;			// Index of the element. 
	anicounter=0;  		// Frame counter. 
	colorvalue=255;		// Aux color value. 

	///////////////////////////////////////////////////////////////////////////////////////
	// First step of animation - First loop
	// Fades in the text while increasing the font spacing and at the same time decreasing the 
	// text color from white (255,255,255) to black (0,0,0). Since the background color
	// is white, the effect will be like moving from transparent to black. 
	//
	// This effect will be applied in the object whose id is "text"+el. NOTE that, in the 
	// end of the fadeout function, el increases by one and fadein is called again. This
	// process is made until all texts are animated. See texts in the HTML section in the
	// end of this document. 
	//
	function fadein() {
		// This is a 20-steps animation procedure. 
		if(anicounter<20) {
				// Increases anicounter.
				anicounter++;

				// Gets the current letterSpacing value. NOTE that this value was 
				// initialized as 1 pixel (see HTML section).
				currentSpace=parseFloat(document.getElementById("text"+el).style.letterSpacing);

				// Increases the currentSpace by .2 
				currentSpace+=.2;

				// Update the letterSpacing style property with the increased value. 
				document.getElementById("text"+el).style.letterSpacing=currentSpace+"px";

				// Decreases the colorvalue after the 10th element. 
				if(anicounter>10) colorvalue-=25;

				// Sets the color value for the "text"+el element. 
				document.getElementById("text"+el).style.color="rgb("+colorvalue+","+colorvalue+","+colorvalue+")";
			
				// Gets the current left position. 
				posleft=parseInt(document.getElementById("text"+el).style.left);
			
				// Updates the left position.
				posleft-=1;
				document.getElementById("text"+el).style.left=posleft+"px";

				// Call fadein again. 
				setTimeout("fadein()",20);
		} else {
				// After the 20 steps, reset values and call fadeout procedure. 
				anicounter=0;
				ge_valopacity=0;
				fadeout();
		}
	}

	//************************************************************************
	// Second step of animation -	Second loop
	// Fades out the text while increasing the font spacing and at the same time increasing the 
	// text color value from white (0,0,0) to white (255,255,255). Since the background color
	// is white, the effect will be like moving from black to transparent. 
	//
	// Everything is the same except that colorvalue increases.
	//

	function fadeout() {
		// 20 steps of animation. 
	        if(anicounter<20) {
				// Increases anicounter.
				anicounter++;

				// Gets the current letterSpacing value. NOTE that this value was 
				// initialized as 1 pixel (see HTML section).
				currentSpace=parseFloat(document.getElementById("text"+el).style.letterSpacing);	                				

				// Increases the currentSpace by .2 
				currentSpace+=.2;

				// Update the letterSpacing style property with the increased value. 
				document.getElementById("text"+el).style.letterSpacing=currentSpace+"px";

				// Decreases the colorvalue after the 10th element. 
				
				if(anicounter>10) colorvalue+=25;

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

				// Gets the current left position. 
				posleft=parseInt(document.getElementById("text"+el).style.left);

				// Updates the left position.
				posleft-=2;
				document.getElementById("text"+el).style.left=posleft+"px";

				setTimeout("fadeout()",20);
	        } else {
			// Reset all animation parameters. 
			anicounter=0;               
			colorvalue=255;   
			
			// Update the element index. 
			el++;
			
			// Call fadein again until the last element. 
			if(el<5) fadein(); 
	        }
	}

</script>

</head>
<body onload="fadein()" bgcolor="white">


<div id="text0" style="position:absolute;left:100px;top:0px;color:rgb(255,255,255);font-size:16pt;letter-spacing:1px;">
Netscape Communications
</div>

<div id="text1" style="position:absolute;left:150px;top:50px;color:rgb(255,255,255);font-size:16pt;letter-spacing:1px;">
Gecko - Link Different
</div>

<div id="text2" style="position:absolute;left:200px;top:100px;color:rgb(255,255,255);font-size:16pt;letter-spacing:1px;">
Cool Demos and Fades 
</div>

<div id="text3" style="position:absolute;left:250px;top:150px;color:rgb(255,255,255);font-size:16pt;letter-spacing:1px;">
Dynamic Font Spacing 
</div>

<div id="text4" style="position:absolute;left:300px;top:200px;color:rgb(255,255,255);font-size:16pt;letter-spacing:1px;">
Cool Gecko Technology 
</div>

</body>
</html>