<html>
<head>
<title>DOM, CSS and Fonts - Sample Code: Animating Fonts with DOM</title>
<script>

	////////////////////////////////////////////////////////////////////////////////
	// Produced by Marcio Galli for Netscape Communications.
	// Uses DOM 1 to dynamically create a set of text elements using 
	// the same content for all the texts but with different sizes. 
	// Then an animation loop uses Math.cos() and Math.sin() functions
	// to start a wave 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
	//

	//**********************************************************************
	// This is the default string that will be used to create multiple texts
	// and will be animated. You can change this. 
	//
	var defaultString="DOMinated";

	parentID="area";	// The div area in which all div elements
				// will be created. 

	vala=160;		// Initial color value that will be used for red and green color channels.
	valc=255;		// Initial color value that will be used for the blue color channel.

	fontsize=40;		// Initial font size. 
	posleft=120;		// Initial left position. 
	postop=50;		// Initial top position. 

	//**********************************************************************
	// Creating all text dynamically with DOM Level 1
	// Use of getElementById, createElement, createTextNode, setAttribute and
	// appendChild. See more info at www.dmoz.org at W3C DOM category.
	//
	function q1() {

		// For statement to create 5 div elements, each one with a text 
		// inside. 
		//
		for(i=0;i<5;i++) {

			// Gets the object of the parentID div element. 
			node=document.getElementById(parentID);

			// Creates a new div element. 
			beforediv=document.createElement("DIV");

			// Calculates cc1 and cc2 values what will be used as color values. 
			cc1=255*(i/11);
			cc2=160*(i/11);
		   	gfx1=parseInt(vala-cc2);		// Calculates gfx1 and gfx2 that will be used 
		   	gfx2=parseInt(valc-cc1);		// as color values. 

			// Creates the style attribute string using:
			// postop, posleft, gfx1, gfx2 and fontsize.
			str="position:absolute;top:"+postop+"px;left:"+posleft+"px;color:rgb("+gfx1+","+gfx1+","+gfx2+");width:260px;height:100px;font-size:"+fontsize+"pt;";

			// Sets the style attribute with the created string. 
			if (navigator.userAgent.indexOf("Gecko")>-1)
				beforediv.setAttribute("style",str);
			else
				beforediv.style.cssText = str;
			
			// Sets the id attribute. 
			beforediv.setAttribute("id","object"+i);
	
			// Creates a text node. 
			newText=document.createTextNode(defaultString);
		
			// Appends the new created text node as a child of the new div element. 
			beforediv.appendChild(newText);

			// Appends the new div element in the node object (div id="area"). 
			node.appendChild(beforediv);

			// Sets attributes to the next iteration. 
			fontsize+=2;
			posleft+=5;
			postop-=(3-((i/20)*2));
		}

		// Call animate!
		setTimeout("animate()",100);	
	}

	////////////////////////////////////////////////////////////////////////////////////////
	// Variables used as parameters for the animate function. 
	//	

	ox=100;			// Reference parameter for the initial left position. 
	oy=100;			// Reference parameter for the initial top position. 
	pi=3.141516*2;		// Approximation of the PI value. 
	ccounter=0;		// Animation counter. 
	ww=1;			// Animation parameter. 

	//*************************************************************************
	// Loop animation
	// 
	function animate() {
		ww+=.1;		// ww parameter decreases slowly. 
		ccounter++;	// counter increases by one. 

		// Animation has 350 steps. In the end the animation starts again - see else 
		// statement...
		//
		if(ccounter<350) {

			// This for statement changes the position of the 7 div areas that contain the text.
			for(i=0;i<5;i++) {

				// Calculates the posx and posy position based on sine and cosine functions and
				// pi, ccounter, i and ww parameters. 
				//
				pis=pi*(ccounter/70)*(i/5);
				posx=ox-20+(Math.cos(pis)*20);
				posy=oy-20+(Math.sin(pis)*20);

				// Sets the left and top position for each object based on i value. 
				document.getElementById("object"+i).style.left=posx+"px";
				document.getElementById("object"+i).style.top=posy+"px";
			}
			// Call animate again...
			setTimeout("animate()",30);
		}
		else {
			// Resets animation parameters...
			ccounter=0;
			// Call animate again...
			setTimeout("animate()",30);
		}
	}

</script>
</head>

<body onload="q1()" bgcolor="#a0a0ff" text="white">
<!-- area where all animation elements (div and texts) are created -->
<div id="area" style="position:absolute;left:100px;top:050px;color:rgb(0,0,255)">
</div>

</body>
</html>