Question

Is it possible to do something which would look like a flash intro to a website with jQuery/CSS? I only need to show a black screen with a logo for some seconds before I show the content to the user. I mean, I could try showing only the content of a div, but I don’t know how I’d get that div to fit the whole screen… something like:

$(document).ready(function() {
$(body not(#intro-covering-page)).css("display", "none");
$('#intro-covering-page').delay(2000).fadeOut();
}); /* I still haven't figured how to properly make this work*/

and maybe having the before the main container. Any ideas?

Answer 1

This will fit the whole screen, although it might look weird if it pops up too late, so you have to make it look good in one way or another.

css = {
    'width' : $(window).width(),
    'height' : $(window).height(),
    'position' : 'absolute',
    'background-color' : '#000000'
}

$(document).ready(function() {
    $(#intro-covering-page).css(css);
    $('#intro-covering-page').delay(2000).fadeOut();
});