How to Use jQuery to Make Slick Page Transitions

Getting Started With HTML/CSS

To begin, let’s dive straight into the CSS. We’ll need to change the CSS for the and set it to display: none.

body { display: none; }

This will stop all of the visual elements in the body from loading, initially “hiding” everything. Immediately, astute readers will realize that changing the body’s display tag to none is risky. If visitors have JavaScript disabled, they won’t be able to view the site.

I suggest appending this in the head section of your document. It is advisable to attach all of your JavaScript at the end of your document to ensure a speedy loading time. However, we need this when the page loads and minified jQuery only comes in at a measly 74kb.

Coding Page jQuery Transitions

Once that’s complete, we need to write the jQuery code that creates the fade transition. First, let’s deal with page fade-ins. In the head section, code up the following:

Therefore, a better solution will be adding the display:none CSS property using jQuery. If visitors have JavaScript disabled, they will still be able to see the body content.

<script type="text/javascript">
$(document).ready(function() {
$("body").css("display", "none");
});
</script>

Your HTML doesn’t have to change much to get these transitions
working, but before we get started on that, let’s download and attach
jQuery to our page. Visit jQuery
and download the latest version of jQuery – it’s easiest to just
right-click the link and select “Save Linked File As”. I would suggest
downloading the minified version since we’re not going to be changing
the source code, but just building on the library.
After downloading jQuery , move the file to a favourable location of
your choice in your site directory. Now let’s see the HTML needed to
attach jQuery to our site.

The first line of the jQuery script assures that the document is ready before it applies the CSS and fades in. The second line applies the CSS style to hide the body so we can use jQuery to fade the page in. The third line calls the jQuery method to fadeIn the body over 2 seconds (feel free to play with the timings and see what you like).Now, if we fire up our browser we can see the new transition in action! But if we click on any of the links, our site disappears like normal. Wouldn't it be nice to have a subtle fade effect when visitors leave one page to go to another? Let's hook that function up.First, let’s apply a special class on the links we wish to create a fade out effect.

LINK

Now, if we go back to our HTML, we can modify our script to get some great looking jQuery fades.

Now, we’ve asked our jQuery script to listen for visitors that click on anchors with a class of transition. If a visitor does click on it, the script immediately cancels the browser redirect, then saves the destination URL in a variable called linkLocation. We then fade out the body of the page over a second, but also pass a second argument that requires the redirectPage function to be called when the animation is completed. The redirectPage function just serves to redirect the browser after the content of your page fully fades out.

Fine Tuning

That’s it! You have everything all set up and you’re ready to rock and roll! But there are a couple of things to mention. These page fades will look much better if you set a specified background color for the html tag similar to the color of your site’s background color in your CSS. This means when the body fades in and out, there is still a color similar to the existing background you have.

html {
    /*If you had a black or close to black background*/
    background-color: #000000;
}

Also, it’s not a bad idea to externalize this script. Remove the script from your HTML and put it in its own .js file and then attach it the same way you did for the jQuery file (but it must be attached after). It’s always a good practice to keep content, presentation and interaction separate.Here’s a quick look of how my files are organized.

Also, if you want to have all links from your page fade-out, you don’t need to specify which ones to have the transition class; we can just make all your links create the fade. To do this, just replace the third line of the script, changing the jQuery selector from $("a.transition") to just $("a") and remove all the “transition” classes from your anchors.

DEMO

DOWNLOAD