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