How can I make the background and its animation appear before the rest of elements

Question

I am having some problems to make the background (and the animation that goes on it) to appear first, and then when the animation finish, all the rest of elements (menu, the QuickTabs block that goes in the center, etc).

This is my website: http://rosayrojo.com/ and this the background that I want to use as splash screen (making the delay of the load of the other elements): http://nellens.com/embal1.html

I would focus on making a splash screen in the template but I can not, because I have to use the same page to display all and besides that, I have to make the animation play again and again when we click on the links: Trailer, Full Movie and Synopsis. So I have to keep the background with its animation all the time.

Thanks in advance.

Answer 1

Ok try this

In your main css file, put this at the bottom of your file:

#navbar, .main-container {
   display: none;
}

than in your main js file, put this (change animation timings as you wish)

jQuery(function(){
    jQuery('#navbar, .main-container')
      .delay(3000) //adjust this time
      .fadeIn(2000);
});