How to Use jQuery to Make Slick Page Transitions
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.
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.
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.
Although it might look pretty good to see, I personally don't really like it. It delays the speed users navigate through the website. Maybe you can preload the next page during the animation, so only the loading time will be reduced?
Otherwise, a good example!
Nice technique.
In firefox though if you click on the back button the previous page doesn't load.
It's a nice idea but I agree with Marco, i don't think it's great for the users flow.
Your images don't exist at the URL you gave them:
http://net.onextrapixel.com/wp-content/uploads/2010/02/jquery-transitions.jpg
The 'net' in this case should be replaced with 'www'.
Hi Jaryl,
http://net.onextrapixel.com is correct. It is our CDN. If you are not viewing the images, you might want to try clearing your cache. ;)
Not just in Firefox, in Chrome and Safari if you click on the back button the previous page doesn't load. I've tried to make it works even we click on the back button by adding display:none property on the body :
body {
font-size: 62.5%;
font-family: Arial, Verdana, Helvetica, sans-serif;
background: #333;
color: #fff;
display: none;
}
And put the fadeIn function in the displayPage function to put on the addEventListener function :
function displayPage() {
$("body").fadeIn(2000);
}
window.addEventListener("load", displayPage, false);
window.addEventListener("unload", displayPage, false);
Thanks for the solution. It works!
1 additional point will be adding
$("body").css("display", "none"); into the displayPage() function.
function displayPage() {
$("body").css("display", "none");
$("body").fadeIn(2000);
}
So that even if visitors have their JavaScript disabled, they will still be able to see the body content.
OK, great!
nb: for this to work, don't add "display: none;" in the css page for the body{}
It looks weird in Chrome.
Right now, the content flashes for a second, then after the JavaScript is loaded it gets hidden only to fade in again. Not really ‘slick’ if you ask me :p Why not use an anti-FOUC measure?
Awesome share.. very nice effect.
Really? You're just replying with a link to your low-cost site. Petty.
How would you go about using this instead of a smooth scroll... I have about a dozen divs within a page that are hidden, I'd like to use this effect just for those links...
Just replace body with the div id and ad a link with a click function:
$(document).ready(function() {$("#id-of-hidden-div").css("display", "none");
$("#id-of-link-to-div").click(function() {
$("#id-of-hidden-div").fadeIn(2000);
});
});
Nice, but if the client have disable js, the body is empty :S:S:S
Just think for one second... disabling javascript is almost as useful as disabling images.
Why disable images? Really load time these days is not an issue.
Why disable javascript? The only time I ever do this is if I find a site that refuses to reveal it's sources. Other then that?
So: "client have disable js?" not likely, but if so do you really care to cattier to these clients with such poor web standards. Or maybe we are all better off without.
...like it!
Not bad, but it could be easily improved by assigning $('body') to a variable and referencing the variable on subsequent instances. That will cache the result of the selector, meaning that you'd only be looking up the value one time instead of three like you are doing in this script.
Tried it out - but with the flickering and back button breaking I can't use it. I saw it on another site a few weeks ago but couldn't remember where.
So nice job but needs more fine tuning.
At http://www.shaynekelly.com I did something similar, and added a unonload hook to deal with the back button. Not perfect either.
Stephan
I think we can use this effect as an alternative for page loader effect,
maybe you can add more effect to this ( not just fade in / out ), it will be more interesting
cheers
Great plugin. Uniquely to favorites! Thanks
Works great, ive been looking everywhere on how to do this.. Is there anyway to stop the white flash between page changes?
thanks alot
mark
Great Job...
Thanks
Hi Dave,
how is it possible that the page transition on your own website:
http://www.onetwentyseven.com/
works like a charm?
I tried to find out how you managed not to fire the fadeIn-transaition unless the whole content is loaded, but failed. I think this is needed to prevent the short flash displaying the sites content before fading in.
Beyond that you managed the issue with the back button.
Could you please give me/us a short advise?
Thanks a lot.
Haha I remember in 1999 / 2000 This was pretty popular.. they even had some extension for dreamweaver just for this ^^
hello,
giving a css display:none value you risk to be detected by google as hiding content. So from the SEO point of view it can be harmful.
I don't know if actually googlebot reads inside javascript code, but if not, it will do it soon.
You should use a more solid alternative, for example the JQuery animate function with parameters : opacity 0 and animation length 0 milliseconds.
LOMAO! That's funny. 1st Google uses this same technique on their own site, so they're not going to kick you for having a display:none.
In fact Google bots will not flag you for this unless the content within the div is suspicious (keyword stuffing). The only way you get banned for hiding content in most cases is if a live Google moderator happens upon your link and sees you are abusing this method. Google posted something about this a few years ago.
Google don't need to optimise their site for Google.
How do you make the BG fade in, as well???
Thanks ladies and gents...
Hey everyone!
This code works great in google chrome, but in safari and firefox is you navigate away from the page and hit the browsers back button, you get presented with a white page.
So i used .bind unload like this:
$(document).ready(function() {
$(window).bind("unload", function() {
});
$("body").css("display", "none");
$("body").fadeIn(1000);
--- rest of the code ---
});
Works like a charm in both firefox and safari.....or at least for me.
hope this helps someone.
Cheers!
Revision:
Works an looks good in safari and firefox, but flickers like crazy in chrome.
To solve the flickering i changed my code like this:
$(document).ready(function() {
$(window).bind("unload", function() {
});
$("body").css("overflow", "hidden")
$("body").hide();
$("body").fadeIn(1000);
--- rest of the code ---
});
Thanks Marius!
I have the whole site loading with the fade effect now. And it's sweet!!!
However, I'm having a little trouble when the initial (home) page loads. When it loads, the actual page will flicker, disappear, then fade in...
My code for the script (linked externally) is as follows:
________________________________________________
$(document).ready(function() {
$(window).bind("unload", function() {
});
$("body").css("display", "none");
$("body").hide();
$("body").fadeIn(700);
$("a.transition").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(700, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});
______________________________
What does anyone recommend for this problem or are we going to have to live with it? It only does it sometimes, not always...
Hey Tim!
Glad i could help.
I had a little test page where i played with the effect. Later, after i posted the code above, i saw that if you have a bigger page that doesn't fit your display, the $("body").css("overflow", "hidden") is going to cut the page to fit your display and disable the browsers scroll.
So, try replacing $("body").css("display", "none"); in your code
with
$("body").css("overflow", "scroll")
That worked for me, the hole page is shown and no white flickering, hope it works for you as well.
Cheers!
Cool! I actually want the scrollbar on there at all times so there is no page shifts when going to another page.
This effect doesn't seem to be working with spry tooltips either. Don't know why. Can you possibly help me with that?
You guys are so helpful thanks a bunch...
Tim
Hey Tim,
Sorry, can't help you with spry, but you could try one of the numerous jquery tooltip plugins.
Ex:
http://flowplayer.org/tools/tooltip/index.html
or
http://craigsworks.com/projects/qtip/
Cheers!
Hey, this works great except for the flicker!
Am I missing something in my code?
jQuery(window).bind("unload", function() {});
jQuery("body").css("overflow", "hidden")
jQuery("body").hide();
jQuery("body").fadeIn(2000);
jQuery("a").click(
function(event){
event.preventDefault();
linkLocation = this.href;
jQuery("body").fadeOut(1000, redirectPage);
}
);
function redirectPage() {
window.location = linkLocation;
}
Also has anyone been able to make this work on IE8?
Working fine. really nice for my application, thanks
Hello and thanks for the script… works great without mootools. I am not a js expert but, can you help me to stop de conflict with mootools ?
regards
@Greg
Just call jQuery.noConflict(); after all the libraries are loaded.
Ex:
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery.("body").hide();
.......rest of the code......
});
or you can do something like this:
var $J = jQuery.noConflict();
$J(document).ready(function(){
$J.("body").hide();
.......rest of the code......
});
This doesn't work in IE 7 or 8. Ideas?
True that this script won't work with IE.
Also, somehow, and I've tested alot of different things with the html- and body tag, the backgrond image won't fade. On the 127site the background image does fade.
And, the flicker is still there. Any suggestions, anyone?
Since Amri asked, "Any suggestions, anyone?" ... here's an idea that occurred to me. Probably a bit of an effort to implement.
Link clicks are not changed. But the HTML returned to the browser depends on the referrer field in the HTTP header. This field tells you which page the visitor is currently viewing.
The server sends back the HTML belonging to the currently viewed page (even for the new page!) and also HTML for the new page. Also added is javascript to switch/fade from the old page to the new page.
So:
* User visits some page on the site: no special action.
* User clicks on link on the site that goes to a page within the site: Server responds with HTML that contains both HTML for the previously viewed page and HTML for the new page. Javascript switches/fades from old to new HTML.
I think this could be very robust for all browsers.
Hope this is understandable, if not, I'll try to explain a bit more.
Stephan
Nice suggestion Stephan.
Sounds like a sound and solid idea.
Any code to try what you are suggesting?
I'm not a coder...
Amri
Amri, demo might take me a month or two; kind of busy with other stuff. -- Stephan
Ok Stephan. I know what you mean. It's three am saturday morning and I'm still working... ;)
Though, if your programming skills can be hirable I am open to suggestions. Though I am not in a hurry. Would be a neat thing to see it in action. :-)
Cheers
Amri
(It's actually Amrit, but my t was missing in my first post)
Dave, you've made me the happiest man in southern Spain this afternoon. I was desperate searching in google how to implement a fadeout effect on a web I'm buliding... and suddenly I found your article.
THANK YOU!!!