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 Comments Add yours

  1. memeil says:

    i love this blog. i will be looking forward your next post!

  2. Emy says:

    thank you for your tips!

  3. Justin Hein says:

    This works well for using the back button. But how do I use it so that when I click a link(Like a nav link) that it will transition smooth as well?

    1. msc1974 says:

      I’d also love to hear how this is done and if possible if its possible to change the ‘are to’ colour between the fade out and before the fade in?

      Hope this makes sense 🙂

  4. jorgecmtz says:

    I fucking love you, This is exactly what I was looking for. Consider me as your new blog fan.

  5. saro says:

    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