Layers Part 3 Animated Layer Opacity

Published on 2001-08-08 by John Collins.

Follow @TechLeaderPro

In my previous article on layers, I showed how you could set the opacity (transparency) level for a layer in IE5+ and NS6+. Using a combination of the new W3C DOM, CSS and a JavaScript animation sequence, it is possible to fade elements on the fly. Remembering that your layer can contain graphics or text (or any HTML element for that matter), this effect can be very eye catching.

For the above example three scripts are used; one to fade in the red layer, one to fade out the green layer, and the final one to fade in and out the blue layer on a loop. Here are the three scripts in their entirety:

<html>
<head>
 
<script language="JavaScript">
//fades layer in
ie5  = (document.all && document.getElementById);
ns6 = (!document.all && document.getElementById);
opac = 0;
 
function fadeIn() {
    if(opac < 100){
        opac+=1;
        if(ie5) document.getElementById('fade').filters.alpha.opacity = opac;
        if(ns6) document.getElementById('fade').style.MozOpacity = opac/100;
        setTimeout('fadeIn()', 50);
    }
}
</script>
 
<script language="JavaScript">
//fades layer out
ie5  = (document.all && document.getElementById);
ns6 = (!document.all && document.getElementById);
opac2 = 100;
 
function fadeOut() {
    if(opac2 > 0){
        opac2-=1;
        if(ie5) document.getElementById('fadeO').filters.alpha.opacity = opac2;
        if(ns6) document.getElementById('fadeO').style.MozOpacity = opac2/100;
        setTimeout('fadeOut()', 50);
    }
}
</script>
 
 
 
<script language="JavaScript">
//fades layer in and out
ie5  = (document.all && document.getElementById);
ns6 = (!document.all && document.getElementById);
opac3 = 0;
 
function opacIn() {
    if(opac3 < 100){
        opac3+=5;
        if(ie5) document.getElementById('fadeL').filters.alpha.opacity = opac3;
        if(ns6) document.getElementById('fadeL').style.MozOpacity = opac3/100;
        setTimeout('opacIn()', 10);
    }else{
        //calls opacOut() function, therefore creating the loop
        opacOut();
    }
}
 
function opacOut() {
    if(opac3 > 0){
        opac3-=5;
        if(ie5) document.getElementById('fadeL').filters.alpha.opacity = opac3;
        if(ns6) document.getElementById('fadeL').style.MozOpacity = opac3/100;
        setTimeout('opacOut()', 10);
    }else{
        opacIn();
    }
}
</script>
 
<style>
.red {position:absolute; left:100px; top:150px; width:100px; height:100px;
 clip:rect(0,100,100,0); filter: alpha(opacity=0); -moz-opacity:0; 
 background-color:red; z-index:1;}
.green {position:absolute; left:250px; top:150px; width:100px; height:100px; 
 clip:rect(0,100,100,0); filter: alpha(opacity=100); -moz-opacity:1.0; 
 background-color:green; z-index:2;}
.blue {position:absolute; left:175px; top:195px; width:100px; height:100px; 
 clip:rect(0,100,100,0); filter: alpha(opacity=0); -moz-opacity:0; 
 background-color:blue; z-index:3;}
</style>
 
</head>
 
 
<body onLoad="opacIn(); fadeIn(); fadeOut();">
 
<div id="fade"  class="red">
</div>
 
<div id="fadeO" class="green">
</div>
 
<div id="fadeL" class="blue">
</div>
 
</body>
</html>

Still with me?!?

The Fade In Script

ie5 = (document.all && document.getElementById);
ns6 = (!document.all && document.getElementById);
opac = 0;

Firstly the basic DOM is initiated, to separate IE5+ from NS6+. This is the simplest form of DOM, and does not account for older browsers at all. Secondly we create a value named 'opac' and set this to zero. The layer will begin with an opacity level of 0, making it invisible.

function fadeIn() {
    if(opac < 100){
        opac+=1;
        if(ie5) document.getElementById('fade').filters.alpha.opacity = opac;
        if(ns6) document.getElementById('fade').style.MozOpacity = opac/100;

This is where all the action is, we create a function called 'fadeIn()', then ask the question 'if opacity is less than 100' with 'if(opac < 100)', the following should happen: add 1 to the value of opac, then for IE5+, set the layer 'fade' alpha opacity to the new value of opac (i.e. now 1), and for NS6+ set the layer 'fade' MozOpacity to opac dived by 100, to give a percentage value.

setTimeout('fadeIn()', 50);

Finally we use the set timeout method to animate the whole process, it will repeat the script until opac = 100 (where opac != 100 is false). The value 50 is the speed of the script, in thousands of a second. A smaller value here will speed up the script.

The Fade Out Script

ie5 = (document.all && document.getElementById);
ns6 = (!document.all && document.getElementById);
opac2 = 100;

Again the DOM is set, and the new value of 'opac2' is set to 100. Here the layer starts off visible, and fades to 0 opacity.

function fadeOut() {
    if(opac2 > 0){
        opac2-=1;
        if(ie5) document.getElementById('fadeO').filters.alpha.opacity = opac2;
        if(ns6) document.getElementById('fadeO').style.MozOpacity = opac2/100;
        setTimeout('fadeOut()', 50);
    }
}

This time the question is asked 'if opac2 is greater than zero' with 'if(opac2 > 0)' then take away 1 from opac2, and as with the previous script the DOM is used to set the opacity level for the layer id 'fadeO' in IE5+ and NS6+ respectively. The set timeout method is again used to animate the 'fadeOut()' function.

The Looping Script

This script is simply a combination of the two above scripts, with a few key differences.

    setTimeout('opacIn()', 10);
    }else{
        //calls opacOut() function, therefore creating the loop
        opacOut();
    }
)

At the end of the 'opacIn()' function, the else statement is used to ask the question 'if this function is finished, then call the 'opacOut() function'. This method is used again at the end of the 'opacOut()' function to call the original 'opacIn()' function, which therefore creates the indefinite loop.

opac3-=5;

Notice this time around that 5 is being added or taken away from the value of the opacity rather than 1, this helps to speed up the script.

Conclusion

To wrap it all up, we use CSS in the head of the document to set the styles for the three layers, and use the onLoad event handler in the body tag to execute all three functions simultaneously:

<body onLoad="opacIn(); fadeIn(); fadeOut();">

Support for this method is limited to the newer browsers and the effect can be quite processor intensive. The versatility of this script is excellent, however, and it is good to play with. Have fun!

Updated 2020 : note that the above post is out-of-date, given this post was originally published in 2001, but is left here for archival purposes.