slayeroffice - web experiments gone horribly awry

01.27.2005 - Slide Show V

This newest slideshow started off in a completely different (and foolish) way in execution than it finished. The idea was to do a fade effect across the image from left to right and then fade the new image in with the same manner.

This was originally tackled in a method similar to Slide Show III where the images are broken out as the background-images of DIV elements and staggered in their background-positions to make a complete image. Those DIVs would then be faded out individually to get the cross-fade effect. This however proved far too much for the browser to handle in a graceful manner since the effect required thin DIVs to give a reasonably attractive transition.

With a 250 pixel wide image with 5 pixel wide DIV's, this resulted in 50 DIVs with a minimum of twenty fading at once. It bogged, and badly. You can see it yourself here.

Then I remembered that PNGs have alpha channel transparency and that all good browsers support it, and MSIE can be coerced into supporting it with its proprietary AlphaImageLoader filter. This meant that the cross fade would be completely possible and really much more simple than I had originally conceived because all that was required was the sliding around of a DIV with a PNG as its background-image (except for'll notice the child selector in the CSS to set the PNG as the background-image for all other browsers, where MSIE uses the filter declared in the original selector).

So, here is the latest Slide Show attempt -- a pretty cool effect with minimal effort (the code is only slightly complicated by the branching required for the transition options). It's valid, semantic XHTML, has been tested and works in Firefox 1.0, Safari, MSIE 6, Netscape 6+ and Opera 7.2. and degrades into inline images for Netscape 4.x.

Slide Show V.

Very impressive effect.
Posted by Brian on January 28, 2005 @ 8:32 pm

Comments have been closed for this post.