Adding the final touches to a site can be the difference between a polished and beautiful site that looks “refined,” and a mediocre site that leaves no impression on visitors. jQuery, the versatile JavaScript library, can be leveraged to create all these fine tuned elements. Today we’re going to look at how to use it to create elegant page transitions. Let’s get to it!
If you would like to quickly take a peek at a very simple implementation of this technique, below is the demo for viewing and download.
[tut demo=”https://onextrapixel.com/examples/jquery-page-transitions/” download=”https://onextrapixel.com/examples/jquery-page-transitions/jquery-page-transitions.zip”]
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 todisplay: 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.
<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.
<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:
<script type="text/javascript">
$(document).ready(function() {
$("body").css("display", "none");
$("body").fadeIn(2000);
});
</script>
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.
<script type="text/javascript">
$(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;
}
});
</script>
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.
[tut demo=”https://onextrapixel.com/examples/jquery-page-transitions/” download=”https://onextrapixel.com/examples/jquery-page-transitions/jquery-page-transitions.zip”]
Conclusion
Using this page fade can make your site stand out as very few sites use this technique. However, be careful to keep the transitions subtle. Used correctly, this jQuery gem will polish and make your site stand out.
