Design-Ireland.net Date Added: 2001-08-08 Last Updated: 2006-10-30 Revision: 14
You are not logged in. Login
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?!?
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.
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.
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.
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!
Posted by loops at 2007-03-21 10:50:52. loops has posted [2] comments on articles since joining.
A little bug can appear when you're using this script with a custom opacity incrementation value (in the example below this value is 3).
This bug happend if you're trying to set a value for the opacity that is not between 0 and 100.
You've got, at first, to increment opac value, and, in a second time, test if you can set it.
See the script below:
I have made a very cool application of this effect on images. In fact, when fadeOut() is close to 0, before to setTimeOut on fadeIn(), Javascript load a new image in the #fade layer. That looks like a flash animation but with unlimited and/or selected images from a database (set an array of source image, print a Javascript array with PHP, and walk on this array with a Javascript function, easy).
Thanks to John Collins.
Updated by loops at 2007-03-21 11:59:46.
Posted by john at 2007-03-28 14:03:19. john has posted [4] comments on articles since joining.
I can see how it might cause a bug, loops, so I have tweaked the code in the tutorial accordingly. The example you give of 3 would cause a problem in my original script with the comparison "if(opac != 100)", as 100 is not evenly divisible by 3 therefore it would cause an infinite loop as the sequence for opac went “...90,93,96,99,102,105...”. This is now fixed, glad you found the scripts useful!
Tags: opacity javascript dom css html opac filters alpha mozopacity animate onload
Average Article User Rating: 10.00 out of 10 (based on 1 votes)
Article URL: http://www.design-ireland.net/article/Layers_Part_3_-_Animated_Layer_Opacity
Title: Layers Part 3 - Animated Layer Opacity
Author: John Collins
Copyright © 2010, the above named author. All rights reserved.