Posts Tagged ‘special effects’

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.

Firefly 3

I noticed I never wrote anything about Firefly, but if you’ve looked at my portfolio, you may have seen it under the Game Tool section. Firefly is simply a tool to create 2d particle systems, for special effects in 2d games. I’ve been working on cleaning up the UI and adding support for more advanced features and fx, and here’s a new screenshots of how things look.

firefly particle fx editor

A few major points of interest:

  • A nicer, custom, iconified tree view showing particles and emitters.
  • 2 views vs. the 3 views in previous versions. The untextured preview was dropped, as it was largely unnecessary.
  • A custom listbox control editable properties replacing the standard property grid control (the property grid look terrible unless it’s heavily customized and it’s also fairly difficult to work with)
  • Paths for particles exhibiting non-linear motion are now shown correctly (previously, only straight lines were shown). I was looking into rendering Bézier splines, but this is difficult to do using just the fixed-function pipeline and just rendering a set of line segments was much simpler and worked quite well.

The rendering is still done using Managed DirectX, which still works great, but, unfortunately, is not supported for 64-bit systems, so the app has to be compiled as a 32-bit application and run atop the WoW64 subsystem.