# The Falling Snow Effect **URL:** \ **Category:** web dev\ **Created:** [November 23, 2014, 12:48am UTC](https://forum.kirupa.com/t/the-falling-snow-effect/352137 "2014-11-23T00:48:23Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [November 23, 2014, 12:48am UTC](https://forum.kirupa.com/t/the-falling-snow-effect/352137/1 "2014-11-23T00:48:24Z")
by [kirupa](http://www.kirupa.com/me/index.htm) | 8 July 2013 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: * * * This is a companion discussion topic for the original entry at [http://www.kirupa.com/html5/the\_falling\_snow\_effect.htm](http://www.kirupa.com/html5/the_falling_snow_effect.htm) ---
**Author:** ![sheebayousuf](https://avatars.discourse-cdn.com/v4/letter/s/f1d935/32.png) [@sheebayousuf](https://forum.kirupa.com/u/sheebayousuf)\ **Post date:** [November 25, 2014, 10:49am UTC](https://forum.kirupa.com/t/the-falling-snow-effect/352137/2 "2014-11-25T10:49:02Z")
How can i create animation of multiple images with the same animation.The animation should slow down at some scroll positions as well. ---
**Author:** ![Ian14](https://avatars.discourse-cdn.com/v4/letter/i/848f3c/32.png) [@Ian14](https://forum.kirupa.com/u/Ian14)\ **Post date:** [December 3, 2014, 12:02am UTC](https://forum.kirupa.com/t/the-falling-snow-effect/352137/3 "2014-12-03T00:02:43Z")
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. Thanks for a great tutorial. Ian ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [December 3, 2014, 12:25am UTC](https://forum.kirupa.com/t/the-falling-snow-effect/352137/4 "2014-12-03T00:25:14Z")
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? Cheers, Kirupa =) ---
**Author:** ![Ian14](https://avatars.discourse-cdn.com/v4/letter/i/848f3c/32.png) [@Ian14](https://forum.kirupa.com/u/Ian14)\ **Post date:** [December 3, 2014, 8:39am UTC](https://forum.kirupa.com/t/the-falling-snow-effect/352137/5 "2014-12-03T08:39:27Z")
Hi Kirupa, 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 … [requestanimationframe in safari](http://stackoverflow.com/questions/17000394/requestanimationframe-not-available-in-safari-how-to-do-fluid-animations) But the page width is still broken. I guess I’m going to have to buy a Mac! Thanks again, Ian ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [December 3, 2014, 4:36pm UTC](https://forum.kirupa.com/t/the-falling-snow-effect/352137/6 "2014-12-03T16:36:43Z")
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. 😛 ---
**Author:** ![Jason\_K70](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/jason_k70/32/7122_2.png) [@Jason\_K70](https://forum.kirupa.com/u/Jason_K70)\ **Post date:** [December 4, 2014, 3:28pm UTC](https://forum.kirupa.com/t/the-falling-snow-effect/352137/7 "2014-12-04T15:28:51Z")
Hi Kirupa, 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? Thanks in advance. Jason ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [December 4, 2014, 8:23pm UTC](https://forum.kirupa.com/t/the-falling-snow-effect/352137/8 "2014-12-04T20:23:06Z")
That’s a pretty common question, and @krilnon posted the beginnings of a solution here: [https://gist.github.com/krilnon/337a6a3442651ca2c371/revisions](https://gist.github.com/krilnon/337a6a3442651ca2c371/revisions) I’ll take a look at this later this week as well 😛 ---
**Author:** ![krilnon](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/krilnon/32/34_2.png) [@krilnon](https://forum.kirupa.com/u/krilnon)\ **Post date:** [December 11, 2014, 6:13am UTC](https://forum.kirupa.com/t/the-falling-snow-effect/352137/9 "2014-12-11T06:13:45Z")
Hey Jason, I [wrote a complete guide on how to adapt the tutorial](http://krilnon.com/falling-snow-in-a-div) 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.) ---
**Author:** ![ottercreate](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ottercreate/32/7126_2.png) [@ottercreate](https://forum.kirupa.com/u/ottercreate)\ **Post date:** [December 11, 2014, 4:22pm UTC](https://forum.kirupa.com/t/the-falling-snow-effect/352137/10 "2014-12-11T16:22:06Z")
I am also interested in the variation for using multiple snowflake images. I took a look at a post in the old forum on the subject ([http://www.kirupa.com/forum/showthread.php?377654-Using-multiple-images-in-the-Falling-Snow-effect](http://www.kirupa.com/forum/showthread.php?377654-Using-multiple-images-in-the-Falling-Snow-effect)) but could not get that code to work. ---
**Author:** ![krilnon](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/krilnon/32/34_2.png) [@krilnon](https://forum.kirupa.com/u/krilnon)\ **Post date:** [December 11, 2014, 10:29pm UTC](https://forum.kirupa.com/t/the-falling-snow-effect/352137/11 "2014-12-11T22:29:37Z")
Hi @ottercreate, Check this out: [https://gist.github.com/krilnon/229f68deb2c02b56ac88/revisions](https://gist.github.com/krilnon/229f68deb2c02b56ac88/revisions) 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](https://gist.github.com/krilnon/229f68deb2c02b56ac88/download) 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!) ---
**Author:** ![ottercreate](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ottercreate/32/7126_2.png) [@ottercreate](https://forum.kirupa.com/u/ottercreate)\ **Post date:** [December 13, 2014, 6:09pm UTC](https://forum.kirupa.com/t/the-falling-snow-effect/352137/12 "2014-12-13T18:09:33Z")
Worked like a charm! Thanks so much @krilnon. ---
**Author:** ![Jason\_K70](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/jason_k70/32/7122_2.png) [@Jason\_K70](https://forum.kirupa.com/u/Jason_K70)\ **Post date:** [December 15, 2014, 10:04am UTC](https://forum.kirupa.com/t/the-falling-snow-effect/352137/13 "2014-12-15T10:04:25Z")
Great, thanks @krilnon, I’ll take a look. ---
**Author:** ![getloggedin](https://avatars.discourse-cdn.com/v4/letter/g/3e96dc/32.png) [@getloggedin](https://forum.kirupa.com/u/getloggedin)\ **Post date:** [December 19, 2014, 3:28pm UTC](https://forum.kirupa.com/t/the-falling-snow-effect/352137/14 "2014-12-19T15:28:48Z")
Hi Kirupa I"ve just implemented the snow on [www.blippit.co.uk](http://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. Any ideas welcome. Thanks John ---
**Author:** ![krilnon](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/krilnon/32/34_2.png) [@krilnon](https://forum.kirupa.com/u/krilnon)\ **Post date:** [December 22, 2014, 12:21am UTC](https://forum.kirupa.com/t/the-falling-snow-effect/352137/15 "2014-12-22T00:21:50Z")
Here’s the tutorial on constraining this effect to a div: [Constraining the Falling Snow Effect | kirupa.com](http://www.kirupa.com/html5/constraining_the_falling_snow_effect.htm) > [@getloggedin](#): > > 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? ---
**Author:** ![lesliew](https://avatars.discourse-cdn.com/v4/letter/l/aca169/32.png) [@lesliew](https://forum.kirupa.com/u/lesliew)\ **Post date:** [December 28, 2014, 11:43pm UTC](https://forum.kirupa.com/t/the-falling-snow-effect/352137/16 "2014-12-28T23:43:19Z")
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. Am I missing something? ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [December 29, 2014, 4:29am UTC](https://forum.kirupa.com/t/the-falling-snow-effect/352137/17 "2014-12-29T04:29:04Z")
Leslie - can you show me the page you are testing on? I just visited the tutorial example on my iPhone 6, and things worked fine. ---
**Author:** ![lesliew](https://avatars.discourse-cdn.com/v4/letter/l/aca169/32.png) [@lesliew](https://forum.kirupa.com/u/lesliew)\ **Post date:** [December 29, 2014, 7:57am UTC](https://forum.kirupa.com/t/the-falling-snow-effect/352137/18 "2014-12-29T07:57:50Z")
[Oops. I replied via email!] 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. Hope this makes sense. Thanks for your help! ---
**Author:** ![lesliew](https://avatars.discourse-cdn.com/v4/letter/l/aca169/32.png) [@lesliew](https://forum.kirupa.com/u/lesliew)\ **Post date:** [December 29, 2014, 5:51pm UTC](https://forum.kirupa.com/t/the-falling-snow-effect/352137/19 "2014-12-29T17:51:39Z")
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. Thank you. ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [December 29, 2014, 11:37pm UTC](https://forum.kirupa.com/t/the-falling-snow-effect/352137/20 "2014-12-29T23:37:41Z")
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. [Next page](https://forum.kirupa.com/t/the-falling-snow-effect/352137.md?page=2)