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