<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 text nodes.
// It will be animated. You can change this.
//
defaultString=":-)";
fontsize=120; // Initial font size.
posleft=120; // Initial left position.
postop=50; // Initial top position.
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.
function q1() {
// For statement to create 11 div elements, each one with a text
// inside.
//
for(i=0;i<11;i++) {
// Gets the object of the area div element.
node=document.getElementById("area");
// 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);
gfx2=parseInt(valc-cc1);
// Creates the style attribute string using:
// postop, posleft, gfx1, gfx2 and fontsize.
if(i!=10) {
str="position:absolute;top:"+postop+"px;left:"+posleft+"px;color:rgb("+gfx1+","+gfx1+","+gfx2+");width:860px;height:600px;font-size:"+fontsize+"pt;";
} else {
// If this is the last element, then the color is set to 0,0,0 (black).
str="position:absolute;top:"+postop+"px;left:"+posleft+"px;color:rgb(0,0,0);width:860px;height:600px;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 the animation procedure.
setTimeout("a3danimation()",100);
}
////////////////////////////////////////////////////////////////////////////////////////
// Variables used as parameters for the a3danimation 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.
// Animation has 350 steps. In the end the animation starts again - see else
// statement...
//
function a3danimation() {
ww+=.1; // ww parameter decreases slowly.
ccounter++; // counter increases by one.
// It's a 70 steps animation. In the end the animation starts again - see else
// statement...
//
if(ccounter<70 ) {
// This for statement changes the position of the 11 div areas that contain the text.
for(i=0;i<11;i++) {
// Calculates the posx and posy position based on sine and cosine functions and
// pi, ccounter, i and ww parameters.
//
pis=pi*(ccounter/70);
ll=(Math.sin(pis))*50*(i/ww);
tt=(Math.cos(pis))*50*(i/ww);
posx=ox+ll-i*2;
posy=oy+tt-i*2;
// 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("a3danimation()",30);
}
else {
ccounter=0;
// Call animate again...
setTimeout("a3danimation()",30);
}
}
</script>
</head>
<body onload="q1()" bgcolor="#a0a0ff" text="white">
<div id="area" style="position:absolute;left:100px;top:050px;color:rgb(0,0,255)">
</div>
</body>
</html>