Thursday, December 31st, 2009

Web 2.Snow

Category: CSS, Examples, Fun, JavaScript

When I talked about some snow related CSS3 experiment, I could not imagine @Natbat was already preparing something like snowflakes, an almost fully CSS3 featured snow FX created for clearleft, specially suited for Chrome and Safari.

And what about @zacharyjohnson? He put snow all over the network via its Winternetizer, the first snow proxy I have ever seen.

Am I missing anybody? … sure, me!

Above FX is dedicated to all Ajaxian readers and created via some CSS3 rule handled via JavaScript for a partial cross browser implementation. WebKit based browsers, included Android and iPhone, plus Firefox 3.6, should render properly, while the most interesting thing, snow a part, is that for the first time rather than browser sniffing, I have implemented a sort of “screen resolution to power computation” sniff:


  1. var totalSnowFlakes = Math.max(
  2.     Math.min((
  3.         document.documentElement.offsetWidth *
  4.         document.documentElement.offsetHeight /
  5.         15000
  6.     ) >> 0, 40), 10
  7. );

Probably not perfect, the aim is to avoid same number of flakes in mobile devices, netbooks, or desktop PCs.
I guess one day we’ll have exposed CPU model and RAM amount as read only userAgent properties, so that all new effects could avoid stress for web surfers.
Something like System namespace in ActionScript, with capabilities for audio and video and extra info about the current navigator … maybe just an AS to JS bridge ’till that day? We’ll see, today the important thing is simply one: Have Fun!

Posted by webreflection at 8:13 am

3.2 rating from 30 votes


Comments feed TrackBack URI

@zachstronaut , with my netbook Atom based your solution is not “that fluid” and the impression, with 5fps, is that the FX does not work properly with not powerful CPUs. Maybe the best thing is to put both strategies together, also because with mine you want have, as example, 50 flakes in small screens, and same amount in a 1080p monitor … what do you think? Anyway, I liked your idea, that is why I have posted it. It is nice as well to study different solution for the same problem: computation power + screen resolution + render time for both repaint and reflow, something we should think about as well.

Comment by webreflection — December 31, 2009

Nice. Am reading this in Kenya so this is the closest am going to get to real snow :)

Comment by jahmani — December 31, 2009

Nothing to see in FF 3.6 (tried on Linux). It works well with Chromium 4 but try Crtl-A to select all text :-)

Comment by pmontrasio — December 31, 2009

Works on my Firefox 3.6 Mac G5

Comment by jamienk — December 31, 2009

@jahmani it was snowing yesterday in London as well :-)

@pmontrasio are you talking about the flash experiment or the snow FX? Is JavaScript/Flash enabled there?

Comment by webreflection — January 1, 2010

Ok, I got it. doesn’t work works.

Too many links in the post exceeded my skills :-)

Comment by pmontrasio — January 1, 2010
… because it was inevitable Unicode Snowman would stick his face into this affair

Comment by Michael Mahemoff — January 4, 2010

I like the snow effect,
we used something simarlar on our site this year

Comment by Tribulus — January 14, 2010

Leave a comment

You must be logged in to post a comment.