How to Create Page Load Animations Using jQuery

We have all gone to Google.com and noticed that they have a neat little animation to reveal more of their page.  So let me show you how to create similar effects using jQuery and jQuery UI.

We will be using the .animate effect for jQuery UI, along with FadeIn and AddClass.  I’m not going to go into detail about these because the code speaks for itself.  I have created 5 demos to showcase animations that are possible on initial page load.  Each demo page gets less and less animation until it’s just a fadein effect.

Check out the demo animations here.

I certainly do not recommend that you apply these animations for most websites.  However, there are plenty of instances where these animations could enhance your sites.  These may be cool for portfolio websites, temporary splash pages before your site launches, or anything else that you may want the user to really notice.

You can take it a step further and only have the animations show for new visitors.  Once a user has visited, create a cookie for them so they do not see the animation.

I should also mention that these pages DO NOT render correctly with IE7+ users.  This is an unfortunate side-effect when using the .animation class on your entire wrapper div.  It has been tested and renders correctly with Chrome, Opera, and Firefox.