Search code examples
jqueryloadfadeinfadeeffect

Page load with logo fadein

I don't know how to explain the type of effect I want but I'll try to be simple. I would like my home page to be opened with my logo in the middle of the screen on a white background and a few seconds later the logo is fading and it shows the home page.

I thought about an index.php with what I want and after 5 seconds it redirects on a index2 with my full homepage but this is definitely not good for the SEO. So maybe with the help of JQuery I could get what I want.

I thought about changing that code :

$(document).ready(function(){   
$('#page_effect').fadeIn(2000);
});

But how could I get the logo in the middle etc...

Thank you very much for your help, Cordially.

Solution

  • Wrap the rest of the page content in a <div>, and have the logo fade out and the <div> containing the page content fade in.

    JSFiddle example