Posts Tagged ‘page fade’

Page fading

Page transitions on a web site are not at all smooth nor elegant in any way; you click on a link or type in an address, the browser sends the request, and once the response comes back it dumps whatever it can onto the screen. I wanted to do a little experiment to see if it was possible to fade in and out between pages, and to do it as unobtrusively as possible (i.e. avoid hacks to the DOM to support the effect).

You can see the result here.

page fading

It works quite well. This uses jQuery’s fadeIn and fadeOut functions, doing a fadeIn on the body when the page is loaded, and a fadeOut when any link is clicked. Once the fadeOut completes, the browser goes to the next page by updating window.location.

function fadeOutPage(target)
{
$(
'body').fadeOut('slow', function () { window.location = target; });
}

function fadeInPage()
{
$(
'body').fadeIn('slow');
}

window.onload() is as follows:

window.onload = function ()
{
$(
'a').click(function ()
{
fadeOutPage($(
this).attr('href'));
return false;
});

fadeInPage();
}

For an actual site, you’d likely need to deal with links handled by the JS click() event differently, so that they don’t fade out the page.

So far, so good. Unfortunately, there’s one obtrusive bit of CSS needed to get the effect to work correctly:

<body style="display:none;">

This is necessary to hide everything in the body when the page initially loads; calling $(‘body’).hide() within window.onload() won’t work as you’ll see the page flicker onto the screen at full opacity, then disappear, then fade in.