Photo fades

I’ve been admiring the ‘image loading…’ and subsequent fade-in of (spectacular) photos on Couloir. Go and have a quick look then return here…

Looks like Flash doesn’t it? Yet the photo fade is performed by a JavaScript timeout changing opacity. No Flash required. The ‘image loading…’ is a div absolutely positioned directly over the photo and faded out once the page has loaded. The function is triggered by an onload and applies a gradually reducing opacity to the ‘loading’ div. Here’s a simplified code snippet to fade out a selected layer.

function fadeOut(objId,opacity) {
  if (document.getElementById) {
    if (opacity >= 0) {
       document.getElementById(objId).style.MozOpacity = opacity/100;
       opacity -= 10;
       window.setTimeout("fadeOut('"+objId+"',"+opacity+")", 100);
    }
  }
}

For the sake of brevity, the above snippet works in Firefox and Mozilla only, but it should give you a decent idea of the approach. As soon as I get a moment, I’ll stick together an accessible cross-browser version and post it in the Sandbox.