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