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