<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>