Alex Rivera | Logout

A way to fade in the background on load?

Asked 2009-06-28T18:14:29.287
10

I am working on a website design, and I need a way to fade in the background image of the body tag when it is completely done loading (perhaps then a pause of 500 ms).

If you see August's website design you will see the background fades in; however, this is done with a Flash background. Is there any way to do this with jQuery or JavaScript?

Update 9/19/2010:

So for those that are coming from Google (this is currently the number one result for "fade in background on load", I just thought I'd make a more clear implementation example for everyone.

Add a <div id="backgroundfade"></div> to your code somewhere in the footer (you can also append this via JavaScript if you don't want your DOM getting cluttered.

Style as such -

#backgroundfade {
  position: fixed;
  background: #FFF /* whatever color your background is */
  width: 100%;
  height: 100%;
  z-index: -2;
}

Then add this to your JavaScript scripting file (jQuery required):

$(document).ready(function() {
    $('#backgroundfade').fadeOut(1000);
});

This has the effect of fading the #backgroundfade element (the box "covering" your actual background) out in 1 second upon DOM completion.

javascript jquery background
Edit
Report

2 Answers

2

I haven't done this myself, but it might work.

You could, I guess, setup the background image and then mask it with a big old div that has a black background. Then play with opacity of this div to create the fade effect. This black div would have to cover the entire body.

answered 2009-06-28T18:34:11.407
-1

My solution:

HTML:

<img id='myImg' />

CSS:

#myImg{
    opacity: 0;              
    -moz-opacity: 0;         
    -khtml-opacity: 0;       
    filter: alpha(opacity=0); 
}

JS:

var img = document.getElementById('myImg'),
    steps = 30,
    appearTime = 1000;

img.src = "/path/to/img.gif";

img.onload = function(){
    for(i=0; i<=1; i+=(1/steps)){
        setTimeout((function(x){
            return function(){
                img.style.opacity = x;
                img.style.MozOpacity = x;
                img.style.KhtmlOpacity = x;
                img.style.filter = "alpha(opacity=" + (x*100) + ")";                    
            };
        })(i), i*appearTime);

    };
};
answered 2010-11-08T12:20:11.427

Your Answer