Topic awaiting preservation: PNG: Javascript/DHTML Snow effect $Pages that link to <a href="https://ozoneasylum.com/backlink?for=8964" title="Pages that link to Topic awaiting preservation: PNG: Javascript/DHTML Snow effect" rel="nofollow" >Topic awaiting preservation: PNG: Javascript/DHTML Snow effect\$

Author	Thread
Scott Bipolar (III) Inmate From: schillmania.com Insane since: Jul 2002	posted 12-07-2003 06:46 http://www.schillmania.com/projects/snowstorm This project was one half of a larger goal: Get PNG working nicely across Mozilla and IE on both win32 and the Mac, while maintaining clean HTML and semantic meaning. (The former part was, make a neat snowing effect.) eg. code: <img src="image/picture.gif" alt="Some picture" class="png" /> This will be transformed to use PNG on supported browsers, and left as GIF for everyone else (no JS support or no PNG support, etc.) The PNG portion of this is capable of handling the above, anyways - The current "snow" component creates the snow entirely via script, so there are no snow-related image tags in the document. The functionality is there in the PNG component, however. (On a side note, a single-line instantiation call from a CDATA-declared script block will be still valid, and can "intercept" loading of GIF images etc. and replace with PNG before the GIFs load etc.) eg: code: <body> <img src="image/blah.gif" alt="" class="png" /> <script type="text/javascript"> <!-- CDATA declaration here for XHTML, I forget the exact syntax --> pngHandler = new PNGHandler(); </script> </body> </html> Alternately, an onLoad() call would suffice also but would mean potentially both GIFs and then PNGs would load. (The inline script block is preferable, though I wonder if it's bad somehow else.) I intend to put together a page with some documentation etc. for this PNG script, though I'm not sure if someone has already done all this or not. I have seen a few different implementations, but I believe this one provides a few advantages over the ones I've seen (primarily on the graceful degradation and semantics arguments.) [This message has been edited by Scott (edited 12-07-2003).]
Steve Maniac (V) Inmate From: Boston, MA, USA Insane since: Apr 2000	posted 12-07-2003 15:17 The good news: this works great on Mac Safari. Fantastic effect. The bad news: 1) Does NOT appear to work in IE 5.2.2, Mac OS 10.2, and 2) having spent ALL weekend shoveling about 28" of the real stuff, my ability to properly enjoy this effect has been seriously diminished. Great work none the less, and maybe by June I'll be in a better frame of mind! [This message has been edited by Steve (edited 12-07-2003).]
smonkey Paranoid (IV) Inmate From: Northumberland, England Insane since: Apr 2003	posted 12-07-2003 23:11 I like it, but a few questions for you: can the snow fall be increased without too much cpu drain? is it possible to get the snow to settle on certain parts of page (one of my sites has lots of little 'info' boxes - it'd be cool if I could get it to stick to the tops of them, while still letting some snow go thru to stick to boxes below tho) and to inform you of a possible bug/oversight: basically if I use my mousewheel to scroll the page the snow doesn't stay stuck to the bottom of the browser window, it just stays static on the page rather than on the screen. In more recent browsers it is possible to detect mousescrolling so this should be able to be fixed if you you deem it a problem.
Scott Bipolar (III) Inmate From: schillmania.com Insane since: Jul 2002	posted 12-07-2003 23:50 Steve / smonkey: Thanks for the feedback. I think the version I had on my site initially worked on IE 5.2.2 on OS X, but maybe I broke something while packaging it up over the weekend It's quite possible. I'll check it some time from my work (we have some of those machines there.) smonkey: The script can be easily modified to make more snow, just change the value of "flakesMax" to something larger. I use a 433-Mhz Celeron at home and it runs the current demo rather slowly, but it's tolerable. It's far better on faster machines of course. From what I've seen, there isn't any real speed increase when using GIF over PNG; most of the CPU usage seems to stem from the animation itself. The scroll event's supposed to be captured, it worked under Mozilla and IE on my machine anyways Haven't tested the scroll handling on the Mac yet. As far as collision detection, it wouldn't be too hard to add some ranges for points of contact.. An array defining rectangles between pairs of x/y coordinates would probably suffice. I don't imagine it would slow things down much either as it appears to be the actual animation (assigning object.style.left and .top etc.) that takes up the most CPU time. Let me know if you use it either way! - Scott
Bmud Bipolar (III) Inmate From: Raleigh, NC Insane since: Mar 2001	posted 12-08-2003 16:46 We've got Netscape 6.2 here at school. And as I've seen many times before... those flakes just keep on going and the page keeps getting taller and taller. But speaking of your original goal, I am impressed to see 8-bit PNG showing up in netscape at all. This is really inspirational If not beneficial. So bravo for doing that. I'll definately want to be trying that out soon. I love PNG. pet [edit] Now just add Doc's crazy you-can't-select-anything code and you're set! =D I still don't know how that works.... baffled [/edit] Shine and shine. :: [Cell=992] :: [See my team's 30 second animation] [This message has been edited by Bmud (edited 12-08-2003).]
Scott Bipolar (III) Inmate From: schillmania.com Insane since: Jul 2002	posted 12-08-2003 20:54 Thanks! I noticed the Netscape 6.2 issue myself as well, I think it's something in my window height parsing code.. It either isn't checking the correct attribute, or there's a problem due to the DTD etc. I'm going to investigate. Same for IE 5.2.2 on Mac OSX, not sure what the problem is there. May be related to event handling. The PNGs are actually 24-bit, I had read something about IE not being able to properly display alpha transparency with 8-bit images; so to make things easier, I just went with 24-bit. What exactly is Doc's "crazy 'you can't select anything' code", exactly? Sounds funky! .. I assume you mean so you can't highlight a snowflake while it's moving down the screen etc., so it doesn't interfere with some text you may have been trying to highlight? [This message has been edited by Scott (edited 12-08-2003).]
Scott Bipolar (III) Inmate From: schillmania.com Insane since: Jul 2002	posted 12-14-2003 02:04 (update) I fixed the problem with Netscape 6.x and the window dimensions; it looks like some browsers still prefer window.innerWidth/innerHeight over document.body or document.documentElement. Unfortunately I realized not all browsers support addEventListener or attachEvent (MSIE). That was the reason nothing was initialising under ie:mac.. window.onload or an equivalent has to be used. I would imagine someone has written an addEventListener prototype for older browsers (Could be a good project otherwise) allowing addEventHandler/removeEventHandler syntax? My script currently just attaches the handler directly to the object in the case of ie:mac, eg. obj[eventType] = eventHandler; Anyways.. fun experiment. It looks like when lots of PNG objects are onscreen simultaneously, the CPU load is higher than when using GIFs as suspected.
Rooster Bipolar (III) Inmate From: the uterus Insane since: Nov 2002	posted 12-14-2003 04:50 I don't seem to get any snow on IE6.0 (win 2k)...
Scott Bipolar (III) Inmate From: schillmania.com Insane since: Jul 2002	posted 12-14-2003 10:37 ^^^ Sounds fishy. Any errors showing up etc. that you can see? (I'm developing/testing on win98/xp here, no visible problems on IE from what I can see!); TIA. Is anyone else seeing this problem? Thanks! [This message has been edited by Scott (edited 12-16-2003).]
RoyW Bipolar (III) Inmate From: Insane since: Aug 2001	posted 12-17-2003 00:15 Rooster, Is it a recent upgrade to IE6. If so you will need to re-install IE6. I have 2 machines at work Win2k, recently upgraded to IE6. On one machine the snow worked on the other it didn't. After re-installing IE6 the snow worked. I know it has something to do with filter support because the fading rollovers on my site stopped working untill I reinstalled. Its a really wierd problem because no javascript errors are thrown.
Ramasax Paranoid (IV) Inmate From: PA, US Insane since: Feb 2002	posted 12-17-2003 01:55 Win XP/IE6 Works but seemed rather slow to start. Actually on first load it appeared my browser window had frozen. Though I did have some heavy apps running in the background which could have been responsible for the slowness. EDIT: Nope, I closed down all apps, and the page was basically frozen(no scrolling) for about 10 seconds until the snow started.
Scott Bipolar (III) Inmate From: schillmania.com Insane since: Jul 2002	posted 12-17-2003 07:53 Thanks for the comments. Interesting! I know the script can be heavy on initializing, with the last version I modified it to create 128 snowflake objects. This is where the heavy load comes in. Creating them "on-the-fly" (ie. as they were needed before animating them down the screen) caused an irritating intermittent pause, so I opted to create a bunch at once. Lowering the number of objects created on init() is the most obvious solution, but at some point more will have to be created (which interrupts the animation momentarily on slower CPUs.) With the "collection" (build-up of snow) this happens anyhow after a time. I vaguely remember IE having "options" to install filters, so a test to actually see if filter objects are supported may be the most accurate way of detecting proper PNG support (At time of writing I was checking for IE 5.5+ on win32.. checking the actual script object(s) to be used is far superior!). GIFs are used in the case where PNG isn't properly supported. (IE requires a DXImageTransform.Microsoft.AlphaImageLoader filter to render PNGs with alpha transparency, which is what the png.js script I wrote is for.)

DHTML Snow effect\$

Author

Thread

Scott
Bipolar (III) Inmate

From: schillmania.com
Insane since: Jul 2002

posted 12-07-2003 06:46

http://www.schillmania.com/projects/snowstorm

This project was one half of a larger goal: Get PNG working nicely across Mozilla and IE on both win32 and the Mac, while maintaining clean HTML and semantic meaning. (The former part was, make a neat snowing effect.)

eg.

code:

<img src="image/picture.gif" alt="Some picture" class="png" />

This will be transformed to use PNG on supported browsers, and left as GIF for everyone else (no JS support or no PNG support, etc.)

The PNG portion of this is capable of handling the above, anyways - The current "snow" component creates the snow entirely via script, so there are no snow-related image tags in the document. The functionality is there in the PNG component, however.

(On a side note, a single-line instantiation call from a CDATA-declared script block will be still valid, and can "intercept" loading of GIF images etc. and replace with PNG before the GIFs load etc.) eg:

code:

<body>

 <img src="image/blah.gif" alt="" class="png" />

 <script type="text/javascript">

  <!-- CDATA declaration here for XHTML, I forget the exact syntax -->

  pngHandler = new PNGHandler();

 </script>

</body>

</html>

Alternately, an onLoad() call would suffice also but would mean potentially both GIFs and then PNGs would load. (The inline script block is preferable, though I wonder if it's bad somehow else.)

I intend to put together a page with some documentation etc. for this PNG script, though I'm not sure if someone has already done all this or not. I have seen a few different implementations, but I believe this one provides a few advantages over the ones I've seen (primarily on the graceful degradation and semantics arguments.)

[This message has been edited by Scott (edited 12-07-2003).]

Steve
Maniac (V) Inmate

From: Boston, MA, USA
Insane since: Apr 2000

posted 12-07-2003 15:17

The good news: this works great on Mac Safari. Fantastic effect.

The bad news:
1) Does NOT appear to work in IE 5.2.2, Mac OS 10.2, and

2) having spent ALL weekend shoveling about 28" of the real stuff, my ability to properly enjoy this effect has been seriously diminished.

Great work none the less, and maybe by June I'll be in a better frame of mind!

[This message has been edited by Steve (edited 12-07-2003).]

smonkey
Paranoid (IV) Inmate

From: Northumberland, England
Insane since: Apr 2003

posted 12-07-2003 23:11

I like it, but a few questions for you:

can the snow fall be increased without too much cpu drain?

is it possible to get the snow to settle on certain parts of page (one of my sites has lots of little 'info' boxes - it'd be cool if I could get it to stick to the tops of them, while still letting some snow go thru to stick to boxes below tho)

and to inform you of a possible bug/oversight:

basically if I use my mousewheel to scroll the page the snow doesn't stay stuck to the bottom of the browser window, it just stays static on the page rather than on the screen. In more recent browsers it is possible to detect mousescrolling so this should be able to be fixed if you you deem it a problem.

Scott
Bipolar (III) Inmate

From: schillmania.com
Insane since: Jul 2002

posted 12-07-2003 23:50

Steve / smonkey: Thanks for the feedback.

I think the version I had on my site initially worked on IE 5.2.2 on OS X, but maybe I broke something while packaging it up over the weekend It's quite possible. I'll check it some time from my work (we have some of those machines there.)

smonkey:

The script can be easily modified to make more snow, just change the value of "flakesMax" to something larger. I use a 433-Mhz Celeron at home and it runs the current demo rather slowly, but it's tolerable. It's far better on faster machines of course. From what I've seen, there isn't any real speed increase when using GIF over PNG; most of the CPU usage seems to stem from the animation itself.

The scroll event's supposed to be captured, it worked under Mozilla and IE on my machine anyways Haven't tested the scroll handling on the Mac yet.

As far as collision detection, it wouldn't be too hard to add some ranges for points of contact.. An array defining rectangles between pairs of x/y coordinates would probably suffice. I don't imagine it would slow things down much either as it appears to be the actual animation (assigning object.style.left and .top etc.) that takes up the most CPU time.

Let me know if you use it either way!

- Scott

Bmud
Bipolar (III) Inmate

From: Raleigh, NC
Insane since: Mar 2001

posted 12-08-2003 16:46

We've got Netscape 6.2 here at school. And as I've seen many times before... those flakes just keep on going and the page keeps getting taller and taller.

But speaking of your original goal, I am impressed to see 8-bit PNG showing up in netscape at all. This is really inspirational If not beneficial.

So bravo for doing that. I'll definately want to be trying that out soon. I love PNG. *pet*

[edit] Now just add Doc's crazy you-can't-select-anything code and you're set! =D I still don't know how that works.... *baffled* [/edit]

Shine and shine. :: [Cell=992] :: [See my team's 30 second animation]

[This message has been edited by Bmud (edited 12-08-2003).]

Scott
Bipolar (III) Inmate

From: schillmania.com
Insane since: Jul 2002

posted 12-08-2003 20:54

Thanks! I noticed the Netscape 6.2 issue myself as well, I think it's something in my window height parsing code.. It either isn't checking the correct attribute, or there's a problem due to the DTD etc. I'm going to investigate.

Same for IE 5.2.2 on Mac OSX, not sure what the problem is there. May be related to event handling.

The PNGs are actually 24-bit, I had read something about IE not being able to properly display alpha transparency with 8-bit images; so to make things easier, I just went with 24-bit.

What exactly is Doc's "crazy 'you can't select anything' code", exactly? Sounds funky! .. I assume you mean so you can't highlight a snowflake while it's moving down the screen etc., so it doesn't interfere with some text you may have been trying to highlight?

[This message has been edited by Scott (edited 12-08-2003).]

Scott
Bipolar (III) Inmate

From: schillmania.com
Insane since: Jul 2002

posted 12-14-2003 02:04

(update)

I fixed the problem with Netscape 6.x and the window dimensions; it looks like some browsers still prefer window.innerWidth/innerHeight over document.body or document.documentElement.

Unfortunately I realized not all browsers support addEventListener or attachEvent (MSIE). That was the reason nothing was initialising under ie:mac.. window.onload or an equivalent has to be used.

I would imagine someone has written an addEventListener prototype for older browsers (Could be a good project otherwise) allowing addEventHandler/removeEventHandler syntax? My script currently just attaches the handler directly to the object in the case of ie:mac, eg.

obj[eventType] = eventHandler;

Anyways.. fun experiment. It looks like when lots of PNG objects are onscreen simultaneously, the CPU load is higher than when using GIFs as suspected.

Rooster
Bipolar (III) Inmate

From: the uterus
Insane since: Nov 2002

posted 12-14-2003 04:50

I don't seem to get any snow on IE6.0 (win 2k)...

Scott
Bipolar (III) Inmate

From: schillmania.com
Insane since: Jul 2002

posted 12-14-2003 10:37

^^^

Sounds fishy. Any errors showing up etc. that you can see? (I'm developing/testing on win98/xp here, no visible problems on IE from what I can see!); TIA.

Is anyone else seeing this problem? Thanks!

[This message has been edited by Scott (edited 12-16-2003).]

RoyW
Bipolar (III) Inmate

From:
Insane since: Aug 2001

posted 12-17-2003 00:15

Rooster,
Is it a recent upgrade to IE6. If so you will need to re-install IE6.
I have 2 machines at work Win2k, recently upgraded to IE6.
On one machine the snow worked on the other it didn't.
After re-installing IE6 the snow worked.

I know it has something to do with filter support because the fading rollovers on my site stopped working untill I reinstalled.
Its a really wierd problem because no javascript errors are thrown.

Ramasax
Paranoid (IV) Inmate

From: PA, US
Insane since: Feb 2002

posted 12-17-2003 01:55

Win XP/IE6

Works but seemed rather slow to start. Actually on first load it appeared my browser window had frozen. Though I did have some heavy apps running in the background which could have been responsible for the slowness.

EDIT: Nope, I closed down all apps, and the page was basically frozen(no scrolling) for about 10 seconds until the snow started.

Scott
Bipolar (III) Inmate

From: schillmania.com
Insane since: Jul 2002

posted 12-17-2003 07:53

Thanks for the comments. Interesting!

I know the script can be heavy on initializing, with the last version I modified it to create 128 snowflake objects. This is where the heavy load comes in.

Creating them "on-the-fly" (ie. as they were needed before animating them down the screen) caused an irritating intermittent pause, so I opted to create a bunch at once. Lowering the number of objects created on init() is the most obvious solution, but at some point more will have to be created (which interrupts the animation momentarily on slower CPUs.) With the "collection" (build-up of snow) this happens anyhow after a time.

I vaguely remember IE having "options" to install filters, so a test to actually see if filter objects are supported may be the most accurate way of detecting proper PNG support (At time of writing I was checking for IE 5.5+ on win32.. checking the actual script object(s) to be used is far superior!).

GIFs are used in the case where PNG isn't properly supported. (IE requires a DXImageTransform.Microsoft.AlphaImageLoader filter to render PNGs with alpha transparency, which is what the png.js script I wrote is for.)