For most of my life, I grew up in parts of the world where you never
really had snow. That wasn't fun. During Christmas, the images of
wintery goodness you grew up expecting and the sunny and warm weather outside your window
never made sense. To make up for the lack of snow in my real world, I simulated
falling snow on my computer. It was one of the first animations I
created using ActionScript in Flash many years ago, and below is a
variation of the original effect running in sweet HTML, CSS, and
JavaScript:
I am trying to implement your falling snow effect in an email template. It works perfectly in Firefox, Chrome and IE but the animation effect doesn’t work in Safari for Windows and the page aspect ratio is broken, so if I resize safari the width of the page is squeezed. This doesn’t happen with the other browsers. Would appreciate any ideas as to a solution.
Hi, Ian!
Safari for Windows hasn’t been updated in many years (since 2012), so it not working in Safari isn’t surprising. Do you see (or need to support) a lot of visitors who use that browser?
Thank you for the reply. True, virtually no visitors using Safari for Windows but nearly half are Mac users so I’ve used it to test compatibility between browsers.
I did find a bit of script that makes the animation work …
The version of Safari on the Mac is very up-to-date It is the Windows version that hasn’t been updated in quite some time.
Because both Safari and Chome are based on a similar WebKit-based rendering engine, if your site works in Chome, it is 99% going to work on Safari for Mac.
The the only thing to check are vendor prefixes, but I think my code handles that.
Buying a Mac for testing purposes isn’t a bad idea, but a good/cheap alternative might be something like BrowserStacks. Before I shifted to using a Mac for all of my development, that is what I used.
Great work. Lovely smooth and subtle effect. I’ve used this on a website that I’m working on and it looks great. However, is there a way to use this effect in a particular div, rather than on the whole page?
I wrote a complete guide on how to adapt the tutorial so that the snow just fits in one div. Right now it’s just a draft I wrote today, but it’s good enough to send over to you now. It describes two approaches, one using Canvas and one using SVG.
Let me know what you think.
(edit: pondering how I set the top and left in IE in the SVG version. hum.)
That shows the few modifications I made to Kirupa’s original tutorial to get multiple images working as snowflake variations. You can also hit the Download Gist button to get a full copy of the files on your computer to run locally, to be sure that you have a working copy of the modifications.
Basically, all I did was add more img elements like maxw3st did originally. Then, I added one line in generateSnowflakes which randomly picks one of the 3 images to clone (you could have more than 3 if you changed that hardcoded value). Some cleanup of the clone-bases was needed, so I added 3 lines to remove them.
Give that a try and post back if it doesn’t help. (Or if it does!)
I"ve just implemented the snow on www.blippit.co.uk and it works well on lap/desktop/ It also works on iPhone 6 Safari in landscape mode but in portrait the flakes become squares while they maintain their motion.
@getloggedin, I went to that site with Safari on an iPad running iOS 8, and I didn’t see the square effect/bug you mentioned. Did you fix it, or is it still happening?
I had been using a much earlier version of this wonderful particle effect but was told it was not animating on iphone 6. So I downloaded fallingsnow_v6.js and tested it before adding to my project using your html.
Doesn’t animate! Tested in locally desktop Chrome, Firefox.
Since posting I got it working on iphone but it’s not working like my previous code.
Maybe it’s my implementation.
I had been using the script and it worked fine on desktop and android but wasn’t working on iphone 6. All the flakes are stuck in the upper left corner and not falling!
So I downloaded v6 (that didnt work so I copied and pasted the code from your demo!!) and it plays on iphone but it’s different.
The flakes are not varied and only appear on the right side and are not changing to second image.
I tried to adapt v6 to switch snowflakes like I had in the earlier 2013 version (snow.js) but it’s not changing. I added the change code from my 2013 script to the new v6 but it’s not right.
I appreciate if you could advise me on updating the new code to vary the flakes and change to the second image like it did in the 2013 version.
This morning I adjusted it so the flakes are falling across the image and the second image does appear.
Haven’t tested it on iphone yet. (Not my device.)
Now I’m working on varying the size and timing of the flakes.
Sorry for the delay in getting back to you, Leslie. Let me know if you run into any other issues. I will have more time tonight to look into this later tonight.
It is the Windows version that hasn’t been updated in quite some time.
