<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.
	//
	// This demo uses DOM Level 1 to animate text elements left and top position dynamically
	// and to change style properties like Letter Spacing and 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
	//

	ani_counter=0;               	// Animation frame counter. 
	colorintensity=255;		// Color intensity. 

	////////////////////////////////////////////////////////////////////////////////
	// This 20 step animation script produces a visual effect interlacing two words. The
	// word "standard" was broken into two pieces: "s*a*d*r*" and "*t*n*a*d". Imagine the * as the
	// font spacing between each font letter. The idea of the effect is to increase the
	// Letter Spacing style attribute (using standards like CSS and DOM), and make both words interlace 
	// to form the word "s*t*a*n*d*a*r*d". 
	//
	// s a d r   - starts in the right side and moves to the left position until the end of the animation.
	//  t n a d  - starts in the left side and moves to the right position until the end of the animation. 
	//
	// The letter spacing starts with 1 pixel (see HTML code below), and it's increased through the
	// animation steps. Also there is a color fade visual effect. Note that the color was initialized 
	// with the same color of the background (rgb:255,255,255), and its value decreases during the
	// animation until it reaches black (rgb:0,0,0). 
	//
	function fontmove() {

		// Will animate for 20 steps. See setTimeout call in the end of this if statement. 
		//
	        if(ani_counter<20) {
	                ani_counter++;

			// Retrieves the current Letter Spacing value. Note that letter-spacing style property
			// was started with 1 pixel value. See the HTML code below. 
			//
	                currentSpace=parseFloat(document.getElementById("text0").style.letterSpacing);

	                currentSpace+=1;		// Increase the font spacing by one pixel.

			// Updates the letter spacing. 
	                document.getElementById("text0").style.letterSpacing=currentSpace+"px";
			document.getElementById("text1").style.letterSpacing=currentSpace+"px";

			// colorintensity is decreased by 25 units for each animation step after the 
			// first 10 steps. You can change this parameter.
			//
	                if(ani_counter>10) colorintensity-=25;

			// Updates the color values for both text elements. 
			//
			document.getElementById("text0").style.color="rgb("+colorintensity+","+colorintensity+","+colorintensity+")";
			document.getElementById("text1").style.color="rgb("+colorintensity+","+colorintensity+","+colorintensity+")";

			// Increases the left position of the first text element by 3 pixels. 
	                posleft=parseInt(document.getElementById("text0").style.left);
	                posleft+=3;
	                document.getElementById("text0").style.left=posleft+"px";

			// Decreases the left position of the second text element by 3 pixels. 
	                posleft2=parseInt(document.getElementById("text1").style.left);
	                posleft2-=3;
			document.getElementById("text1").style.left=posleft2+"px";

			// Call fontmove again...
	                setTimeout("fontmove()",20);
	        }         
	}

</script>
</head>
<body onload="fontmove()" bgcolor="white">
<div id="text0" style="position:absolute;left:000px;top:0px;color:rgb(0,255,255);font-size:20pt;letter-spacing:1px;">
tnad
</div>
<div id="text1" style="position:absolute;left:102px;top:0px;color:rgb(0,255,255);font-size:20pt;letter-spacing:1px;">
sadr
</div>
</body>
</html>