Page Fade In effect with Jquery

This is a tutorial in which i show how to add a fade in effect to your pages, this gives a nice feel to a website.

The other a client ask me to have every page fading in when they load and i thought that is easy and if you notice google home page also has a smooth fade in effect when the user moves the mouse over the page, on this example the will be fading in as soon as the page loads and the best of all it only takes a few lines of code due to the fact the we will be using a great Javascript Library Jquery

This will be short and easy.

1. Set up HTML

Firstly we set up a basic web page, nothing fancy just for the demonstration, on this page i will include a page wrapper with some text.

Place the code displayed below, inside the body tag of a HTML document.

<div id="page_wrapper">
<h1>Page Fade In effect with Jquery</h1>
<p>A simple Jquery trick to Fade In any web page in your web site</p>
<p>To verify it just reload this page.</p>
<p><a 
  href="http://keycss.com/entry/page_fade_in_effect_with_jquery" 
  title="Page Fade In effect with Jquery">Check the tutorial page</a>
</p>
</div>

2. Add some nice CSS

With this css i have added a nice background to the body, set some basic styling for the text, centered the page wrapper , added padding and also added some css3 rounded corners.

This is nothing to advanced but gives it a nice look, i think.

 

body {
     background: url('images/background.png') top left repeat-x;
}

h1 {
    color: #ffffff;
    font-family: Helvetica, arial, verdana;
    font-size: 24px; color:#000000;
}

p { 
    font-size: 13px; 
    line-height: 13pt; 
    margin-top: 8px; 
    color: #808080;
}

a { 
    font-size: 13px;
    text-decoration: none;
    color:#e51837;
    cursor: pointer;
}

a:hover {
    text-decoration: underline;
}

#page_wrapper {
    width:500px;
    margin:0 auto; 
    border: 1px solid #cccccc; 
    padding: 20px;
    background-color:#ffffff;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
}

#page_wrapper img {
    float:right;
}

Place the code above in a stylesheet or between the the head tag of an HTML document.

3. The Jquery nifty bit

I have placed this Jquery code before the end of the closing body tag, so that the page effect happen before the all document is loaded.

With two lines of Jquery code we create the fade in effect of the page, yes I know I love it too.

$('body').hide();
$('body').fadeIn(1000);

I placed all the code in one page to make this tutorial simple but for good reasons and practice this should be placed outside the document and linked to it.

Conclusion

I dont know about you but i like the effect of having the page fading in on this website, hope you like this little trick.
Please feel free to ask any questions on the comments below and i will assist you if you have any problem with this tutorial.

Please view the example to better understand the tutorial, and please download the file to play around.

View the example or Download the files.