DHTML/Javascript snow script

DHTML Snowstorm: Javascript Snow

Over the last month or so I've been working on some OO-style animation and PNG libraries. One of the results is visible above; though quite full of bugs I'm sure, the effect is kind of neat: Alpha-transparent snow. The relevant snow script, for anyone interested, is at snowstorm.js. This takes advantage of alpha transparency via PNG, more on this below.. In the meantime, a download-friendly version of this is being worked on. Check back later.

Why PNG?

The primary benefit of PNG is alpha transparency, which makes for nice overlaying without the so-called "jaggies" that GIF suffers from. The downside is that IE does not "natively" support PNGs, you have to use a proprietary filter to get the transparency to work (among other things). For this reason I have been messing around with a PNG wrapper library which can add the IE crap while leaving the base HTML code as clean as possible - All that's required is a class declaration including "png" on said element (which can use GIF by default, which is what all buggy/non-PNG-supporting browsers will see.)

For anyone who may be interested, the relevant script is png.js. It has not been tested on a large number of configurations, presumably there are plenty of bugs remaining to be worked out. I believe it's a step in the right direction though for adding PNG support without having to sacrifice code structure, meaning or validity.

The following are simple examples of code that can be used with the PNG library currently in development, and will be "transformed" to PNG under supporting browsers:

<img src="image/foo.gif" alt="Foo image 1" />

<div style="background-image:url(image/foo.gif)">Foo image 1</div>

<style type="text/css">
#foo, div.foo {
background:transparent url(image/foo.gif) 0px 0px no-repeat;
}
</style>
<div id="foo">Foo image 1</div>
<div class="foo">Foo image 1</div>

The PNG wrapper can determine image source or background image URLs either directly from the attributes, or via the "rendered style" object (proprietary method under IE, and DOM under Mozilla). This is used to either transform the current element or replace it with a new element (in IE's case) containing the correct URL and/or filters needed to display the PNG correctly.

Using this method, older and non-PNG-supporting browsers should degrade gracefully as GIFs are provided "by default". To access the DOM after it has been parsed but before the body has loaded (important difference: the GIFs and other external sources have not yet loaded), the call to the script can be placed in an inline (CDATA-typed, so it's still valid) script block, eg.

<script type="text/javascript">
pngHandler = new PNGHandler();
</script>

Realising that very few people likely actually read this stuff, I'm going to stop at this point and write more later when I have something concrete to demo.

Related links