Add a smooth transition between pages

Thanks to jQuery, you can have a nice smooth transition between pages in your website.  This is specially useful if you have a website with background color different to white, as it will be more pleasant to your visitors if they click on a link and they don’t get a white page, but a transition with the same color as your website background.

Click on this image holder to see the effect you will get:

First step is to be sure your body doesn’t show by itself. For doing that, just insert the following line on your theme’s style.css:

body { display:none; }

After this, if you refresh your page, you will not be able of seeing anything but the background of your site.

Now we’re going to add the smooth transition between pages, so information can appear inside your background color without showing any white page.

Look for your call to jQuery script:

<script src="http://code.jquery.com/jquery-latest.js"></script>

Right after it, insert the following code:

<!-- fade in effect for all pages : If you want to remove this function, please remove display:none from stlye.css body --> 
<script> 
 $(document).ready(function(){ 
 $("body").css("display", "none");
 $("body").fadeIn(800); 

 });
</script>

You can now try it on your webbrowser.  Remember to do a hard refresh in your browser and to be sure style.css is updated with the new body line.

 

7 thoughts on “Add a smooth transition between pages

  1. Is this code works on any browser?
    As i tried in Firefox and just shows the plain background but in g-chrome works…

    What you mean by hard refresh?
    could it be that cookies load the page automatically after the first time?

    Thanks in advance.

Leave a Reply