Search code examples
javascriptjquerycsshtmlcross-fade

Web page smooth fade in after intro picture fade in

I have been trying to find the solution here but since I'm pretty new to JavaScript etc. it has been impossible for me to make this work.

So what I need is a firm's LOGO first appearing when entering the website. The logo should fade in but quite quickly - maybe in 500ms.

AND after the logo has been there for 2 seconds, then it should fade away and the actual webpage should fade in.

I just cannot seem to make this work. Can You help me?

Here is the intro page: http://rockworksstudio.fi/index.html

And after 2 seconds or so it should smoothly translate into this page: http://rockworksstudio.fi/index2.html

I really hope that You could be "overly specific". Thank You in advance!

-Tommi

PS. Also IE blocks by default certain kind of code so that would be important to circumvent.

Solution

  • I have created a fiddle for you: https://jsfiddle.net/mehmetb/c3q62m93/

    setTimeout(function() {
  //After 2000 milliseconds, fade out the overlay. The animation duration is 500 ms.
  $(".overlay").fadeOut(500);
}, 2000);