CSS Full Page Fade Effect

This is a simple technique to make new pages appear with a fade effect as if they were being loaded via AJAX. It’s easy to implement and can give your site an extra bit of polish (also it can mask jarring load effects!). You might have noticed that this site is currently using it.

First you’ll need to make sure you have included Modernizr on your site and included at least javascript and CSS transition detection. This makes sure that the effect will only happen on browsers that support it and will fall back to a normal page load on browsers that don’t.

Note: If you are using Drupal and use the Navbar module, make sure you include the patch in post #58 on this page. There is an issue that prevent Modernizr running correctly for logged-out users.

Add a class to the container of the content you want to fade in – this could be the entire <body> tag or just the main content area. If your header and footer don’t change this might be a better option. For this example I’ll use body-container.

Make sure the following JavaScript runs on page load:

1

$('.body-container').addClass('load');

Finally add this CSS to the top of your stylesheet:

1

2

3

4

5

6

7

8

9

10

11

12

.js.csstransitions.body-container{

opacity:0!important;

}

.js.csstransitions.body-container.load{

opacity:1!important;

-webkit-transition:opacity0.25sease-in;

-moz-transition:opacity0.25sease-in;

-o-transition:opacity0.25sease-in;

-ms-transition:opacity0.25sease-in;

transition:opacity0.25sease-in;

}

If your browser supports both JavaScript and CSS transitions, Modernizr will add the .js.csstransitions classes to your page. The first CSS rule makes your content transparent and when the content has fully loaded JavaScript will add the load class to your content and the second CSS rule will fade the content in.

You can tweak how long the fade effect take by modifying the 0.25 value.