How to Use jQuery to Make Slick Page Transitions

Recently i had a requirement where i needed to create page transition. While using jquerymobile, the transitions really took a toll on some browsers when added with contents. Browser support was a major hurdle. Then i came across a jquery powered solution for the same and its really cool. Thought of sharing it here :

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.
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.

$(document).ready(function() {
    $("body").css("display", "none");
});

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.

<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>

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:

$(document).ready(function () {
    $("body").css("display", "none");
    $("body").fadeIn(2000);
});

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.

<a href="otherPage.html" class="transition">LINK</a>

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

$(document).ready(function () {
    $("body").css("display", "none");
    $("body").fadeIn(2000);
    $("a.transition").click(function (event) {
        event.preventDefault();
        linkLocation = this.href;
        $("body").fadeOut(1000, redirectPage);
    });
    function redirectPage() {
        window.location = linkLocation;
    }
});

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.

1 Comment on "How to Use jQuery to Make Slick Page Transitions"

Leave a Reply

Your email address will not be published. Required fields are marked *