<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 style properties like color and font spacing. // // 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 animation effect is divided into two parts: // Fade in and fade out. /////////////////////////////////////////////////////////////////////////////////////// // Variables used as parameters for the animation. // el=0; // Index of the element. anicounter=0; // Frame counter. colorvalue=255; // Aux color value. /////////////////////////////////////////////////////////////////////////////////////// // First step of animation - First loop // Fades in the text while increasing the font spacing and at the same time decreasing the // text color from white (255,255,255) to black (0,0,0). Since the background color // is white, the effect will be like moving from transparent to black. // // This effect will be applied in the object whose id is "text"+el. NOTE that, in the // end of the fadeout function, el increases by one and fadein is called again. This // process is made until all texts are animated. See texts in the HTML section in the // end of this document. // function fadein() { // This is a 20-steps animation procedure. if(anicounter<20) { // Increases anicounter. anicounter++; // Gets the current letterSpacing value. NOTE that this value was // initialized as 1 pixel (see HTML section). currentSpace=parseFloat(document.getElementById("text"+el).style.letterSpacing); // Increases the currentSpace by .2 currentSpace+=.2; // Update the letterSpacing style property with the increased value. document.getElementById("text"+el).style.letterSpacing=currentSpace+"px"; // Decreases the colorvalue after the 10th element. if(anicounter>10) colorvalue-=25; // Sets the color value for the "text"+el element. document.getElementById("text"+el).style.color="rgb("+colorvalue+","+colorvalue+","+colorvalue+")"; // Gets the current left position. posleft=parseInt(document.getElementById("text"+el).style.left); // Updates the left position. posleft-=1; document.getElementById("text"+el).style.left=posleft+"px"; // Call fadein again. setTimeout("fadein()",20); } else { // After the 20 steps, reset values and call fadeout procedure. anicounter=0; ge_valopacity=0; fadeout(); } } //************************************************************************ // Second step of animation - Second loop // Fades out the text while increasing the font spacing and at the same time increasing the // text color value from white (0,0,0) to white (255,255,255). Since the background color // is white, the effect will be like moving from black to transparent. // // Everything is the same except that colorvalue increases. // function fadeout() { // 20 steps of animation. if(anicounter<20) { // Increases anicounter. anicounter++; // Gets the current letterSpacing value. NOTE that this value was // initialized as 1 pixel (see HTML section). currentSpace=parseFloat(document.getElementById("text"+el).style.letterSpacing); // Increases the currentSpace by .2 currentSpace+=.2; // Update the letterSpacing style property with the increased value. document.getElementById("text"+el).style.letterSpacing=currentSpace+"px"; // Decreases the colorvalue after the 10th element. if(anicounter>10) colorvalue+=25; // Sets the color value for the "text"+el element. document.getElementById("text"+el).style.color="rgb("+colorvalue+","+colorvalue+","+colorvalue+")"; // Gets the current left position. posleft=parseInt(document.getElementById("text"+el).style.left); // Updates the left position. posleft-=2; document.getElementById("text"+el).style.left=posleft+"px"; setTimeout("fadeout()",20); } else { // Reset all animation parameters. anicounter=0; colorvalue=255; // Update the element index. el++; // Call fadein again until the last element. if(el<5) fadein(); } } </script> </head> <body onload="fadein()" bgcolor="white"> <div id="text0" style="position:absolute;left:100px;top:0px;color:rgb(255,255,255);font-size:16pt;letter-spacing:1px;"> Netscape Communications </div> <div id="text1" style="position:absolute;left:150px;top:50px;color:rgb(255,255,255);font-size:16pt;letter-spacing:1px;"> Gecko - Link Different </div> <div id="text2" style="position:absolute;left:200px;top:100px;color:rgb(255,255,255);font-size:16pt;letter-spacing:1px;"> Cool Demos and Fades </div> <div id="text3" style="position:absolute;left:250px;top:150px;color:rgb(255,255,255);font-size:16pt;letter-spacing:1px;"> Dynamic Font Spacing </div> <div id="text4" style="position:absolute;left:300px;top:200px;color:rgb(255,255,255);font-size:16pt;letter-spacing:1px;"> Cool Gecko Technology </div> </body> </html>