0

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.

capitanmelao
  • 15
  • 5
  • Not sure what you trying but load the website and in console run this `jQuery('#mainBG').append('
    '); jQuery('#overlay').fadeTo(4000, '0');`     – Aamir Afridi Apr 03 '14 at 10:55
  • Thanks for the answer, I just inserted the animation in a div: http://rosayrojo.com So i have the background in #mainBG and the animation in #swiffycontainer with a z index. I am trying to reach what I want with the code that you gave to me but nothing happens (I am sorry, maybe I make some mistakes I'm new into this) I did add it in a .js file called "gif.js". Thank you – capitanmelao Apr 04 '14 at 08:55
  • Can u please ask your question in simple way. just the bit which is causing the problem instead of the whole website. – Aamir Afridi Apr 04 '14 at 09:51
  • Yes, sure, what I want to do is to load first the #mainBG and #swiffycontainer, with a delay for the animation, when it will finish it will load the rest of components of the websites, thats all. – capitanmelao Apr 04 '14 at 10:16

1 Answers1

0

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);
});
Aamir Afridi
  • 6,364
  • 3
  • 42
  • 42
  • Thank you again, sorry for the late answer , I was in the metro, I did it but now shows only the background and the rest (navbar and content) does not appear. – capitanmelao Apr 04 '14 at 15:52
  • Appears! I put it first but it did not work now works well, I have to adjust the time thats all, thank you very much!, please can you paste to me the old code too? I would like to save it for me I like it. thank you again, you made my day, I owe you one donut and coffee. :D – capitanmelao Apr 04 '14 at 15:58
  • You can check the history here http://stackoverflow.com/posts/22860221/revisions if you can u offer me a cup of coffe and donut. just click the donate button here http://pmp.aamirafridi.com/_rpg/ :D – Aamir Afridi Apr 04 '14 at 16:07