Load page with Fade effect

Posted in: jQuery , No Comments

In this tutorial I will show you how to load a webpage with fade effect using jQuery. This will put a cool impression on your site visitors. Jut 2-3 lines of jQuery code and a cool loading effect for your website.

In this tutorial, I will write my webpage content under ID wrap and load its content with fade effect.
Header and footer region of the webpage will load / open normally. Only content under ID wrap will load with fade effect,

Step 1:
prepare a basic page with header, wrap and footer regions.

<div id="header"></div> <!-- Put your header content here like logo -->

<div id="wrap"></div> <!-- Put your webpage content here -->

<div id="footer"></div> <!-- Put your footer region here like copyright text etc.-->

Step 2:
Add following css for ID wrap

#wrap {
display: none;

Step 3:
Call jQuery library

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Step 4:
Now we will add jQuery code in head section and tell it to find ID wrap and display its content with fade effect and in 3 seconds.

<script type="text/javascript">
$(document).ready(function() {
	$("#wrap").fadeIn(3000); // this will show content with fade effect and in 3 seconds

Check below link for live demo.

About the Author

Name: Ravi Shekhar
I love learning and sharing web stuffs.

Share this post

Twitter Facebook Google Buzz Digg StumbleUpon Delicious Technorati

Leave a Reply