jQuery Lens Flare is a very striking effect, by Professor Cloud The effect works by distributing various flare images at proportional distances along a line projected from the Sun through the centre of the viewport and on to the opposing side. In the sunset demo, we deliberately cut-off the lens flare as the Sun moves out of shot.

Flare Images

All of the flare and Sun images are 8-bit (256 colour, palletised) PNGs with alpha. In most situations this is a good alternative to 32-bit PNGs as there is a significant size saving. Fine gradients can look a little banded, but this can be mitigated somewhat with dithering.

IE6 Issues

While the plugin code works perfectly well in IE6, the transparent PNG images do not. There are some work-arounds to enable PNG alpha support in IE6, but frankly, as this is just a cosmetic effect, I would simply not bother turning the effect on for IE6. In most applictions (excluding this page of course), the end user will be none the wiser.

In the space demo above, we have basic occlusion as you move the Sun behind the Earth. This actually works rather well, and the effect would be further improved if varying opacity could be applied correctly to images with alpha channels. This would allow us to fade in and out of the lens flare, rather than just on or off. Unfortunately, opacity only seems to work correctly with non-alpha images. You can also move the small star in the bottom corner, although no occlusion is applied.

This is probably of limited use within a regular web document, but a “canvas” version would be good for games.