<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. // Uses DOM 1 and CSS to change 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 // // This is a basic color fade in effect. There are 6 elements in the HTML // section at the end of this document. Each one is a div that contains // a text node. When the page is loaded, the colorfade animation procedure is called. // // It moves the text whose id is "text"+el to the right and at the same // time changes the color from white (255,255,255) to gray. // When both the background and the text are white (255,255,255), // it creates a transparency effect. // /////////////////////////////////////////////////////////////////////////////////////// // Variables used as parameters for the animation. // cc=20; // Number of frames in the animation. aa=255; // Initial value used as color parameter for Red, Green and Blue channels. tt=0; // Aux counter - the left position of the element. el=0; // Index of the element. function colorfade() { // Animates until cc >0. It's an animation in 20 steps. Note that cc was initialized with 20. if(cc>0) { tt+=cc; // tt value increased by cc. NOTE that // tt value is used to update the left position. // It's using the acceleration approach. In the beginning // the position is updated by high values (20,19,18..) // and in the end it's updated by low values (4,3,2..). // It will produce a gradual slowing effect. // Sets the left position using tt parameter. document.getElementById("text"+el).style.left=tt+"px"; // aa color value. Decreasing by 5 units. aa-=5; // Sets the color value. document.getElementById("text"+el).style.color="rgb("+aa+","+aa+","+aa+")"; // Decreases the animation counter. cc--; // Call colorfade again... setTimeout("colorfade()",20); } else { // Reset all animation parameters except the el index. cc=20; aa=255; tt=0; // Call again the colorfade procedure increasing the el index until all // elements (see HTML section bellow) are animated. The last element animated // is the sixth element. if(el<5) { el++; setTimeout("colorfade()",20); } } } </script> </head> <body onload="colorfade()" bgcolor="white"> <div id="text0" style="position:absolute;left:0px;top:0px;color:rgb(255,255,255);font-size:16pt;"> Gecko </div> <div id="text1" style="position:absolute;left:0px;top:20px;color:rgb(255,255,255);font-size:16pt;"> Technology </div> <div id="text2" style="position:absolute;left:0px;top:40px;color:rgb(255,255,255);font-size:16pt;"> Text </div> <div id="text3" style="position:absolute;left:0px;top:60px;color:rgb(255,255,255);font-size:16pt;"> Transitions </div> <div id="text4" style="position:absolute;left:0px;top:80px;color:rgb(255,255,255);font-size:16pt;"> Fades </div> <div id="text5" style="position:absolute;left:0px;top:100px;color:rgb(255,255,255);font-size:16pt;"> without opacity </div> </body> </html>