<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. // // This demo uses DOM Level 1 to animate text elements left and top position dynamically // and to change style properties like Letter Spacing and 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 // ani_counter=0; // Animation frame counter. colorintensity=255; // Color intensity. //////////////////////////////////////////////////////////////////////////////// // This 20 step animation script produces a visual effect interlacing two words. The // word "standard" was broken into two pieces: "s*a*d*r*" and "*t*n*a*d". Imagine the * as the // font spacing between each font letter. The idea of the effect is to increase the // Letter Spacing style attribute (using standards like CSS and DOM), and make both words interlace // to form the word "s*t*a*n*d*a*r*d". // // s a d r - starts in the right side and moves to the left position until the end of the animation. // t n a d - starts in the left side and moves to the right position until the end of the animation. // // The letter spacing starts with 1 pixel (see HTML code below), and it's increased through the // animation steps. Also there is a color fade visual effect. Note that the color was initialized // with the same color of the background (rgb:255,255,255), and its value decreases during the // animation until it reaches black (rgb:0,0,0). // function fontmove() { // Will animate for 20 steps. See setTimeout call in the end of this if statement. // if(ani_counter<20) { ani_counter++; // Retrieves the current Letter Spacing value. Note that letter-spacing style property // was started with 1 pixel value. See the HTML code below. // currentSpace=parseFloat(document.getElementById("text0").style.letterSpacing); currentSpace+=1; // Increase the font spacing by one pixel. // Updates the letter spacing. document.getElementById("text0").style.letterSpacing=currentSpace+"px"; document.getElementById("text1").style.letterSpacing=currentSpace+"px"; // colorintensity is decreased by 25 units for each animation step after the // first 10 steps. You can change this parameter. // if(ani_counter>10) colorintensity-=25; // Updates the color values for both text elements. // document.getElementById("text0").style.color="rgb("+colorintensity+","+colorintensity+","+colorintensity+")"; document.getElementById("text1").style.color="rgb("+colorintensity+","+colorintensity+","+colorintensity+")"; // Increases the left position of the first text element by 3 pixels. posleft=parseInt(document.getElementById("text0").style.left); posleft+=3; document.getElementById("text0").style.left=posleft+"px"; // Decreases the left position of the second text element by 3 pixels. posleft2=parseInt(document.getElementById("text1").style.left); posleft2-=3; document.getElementById("text1").style.left=posleft2+"px"; // Call fontmove again... setTimeout("fontmove()",20); } } </script> </head> <body onload="fontmove()" bgcolor="white"> <div id="text0" style="position:absolute;left:000px;top:0px;color:rgb(0,255,255);font-size:20pt;letter-spacing:1px;"> tnad </div> <div id="text1" style="position:absolute;left:102px;top:0px;color:rgb(0,255,255);font-size:20pt;letter-spacing:1px;"> sadr </div> </body> </html>