The Falling Snow Effect


No worries. It was good for me to work it out myself!

My problem was initially with the download. Didn’t work. Downloaded again. Still didn’t work. Copied and pasted the javascript text in your demo. Worked!

The rest I worked out.

Thank you for all you do for the post-flash community!


Yay! Glad you got it working :wink:


I wish a Happy New Year to everybody!

I love the script of the falling snow and have used the modified scripts of krilnon to let snow up to 3 different flakes.
My biggest wish is to turn on or off the snow as needed. My experiences in jQuery are rather small. My attempts to realize this, have not yet borne fruit.
My thought was to try it as follows:

if(letitsnow == true) {
            $("#snowflakeContainer").html("<p class='snowflake'>*1<\/p><p class='snowflake'>*2<\/p><p class='snowflake'>*3<\/p>");
            $("#snowscriptContainer").html("<script src='http://www.thedomain.xx/.../snowscript-krilnon.multi.js'><\/script>");    
  else {


For the first call the function does its job, but I think I have to change the variables in the main file (the modified snow falling script). Has anyone here experienced a good idea?
Many Thanks.


The easiest way is probably to toggle the CSS .snowflake { display: none; } on and off.

There are other ways, but I’m on a phone and typing symbols is a pain.


Thank you for your falling snow code! I am new to coding but I want to put the falling snow code on my blog. It seems pretty simple though- you just copy and paste the code in the correct spot in your HTML document, correct? I hope to learn more about coding by studying other codes so I can hopefully make my own codes someday.


Yep, that’s pretty much it. Sometimes there are external files, like fallingsnow_v6.js in the tutorial, but you can modify those too.


How can i change falling images, can you help any one please…


Just change the following…

<div id="snowflakeContainer">
    <p class="snowflake">*</p>

…to whatever image you want! :smile:

<div id="gumdropContainer">
    <p class="gumdrop">*</p>



I too had created a small animation featuring a snowman and falling snow and to do this I had taken reference from as they have really wonderful tutorials related to animations, graphics and other techniques.


um, im sorry, i know nothing about coding so… i will sound very dumb. would i be able to use this code as a global style using the extension Stylish to create falling snow flakes over every website?
and, would changing the asterisks to hearts do any harm? hearts being alt+3 or :heart:
thanks everyone!!
:cherry_blossom: :sparkles::cherry_blossom:


This effect is part CSS, part HTML, and part JavaScript. To have this effect appear on every page, you’ll need a way of ensuring all three of those parts are present on each page.

Changing the asterisks to a heart will do no harm. Go for it :smile:


Thanks so much…It Worked like a charm!



Glad it worked! Do you have a link to it working you’d like to share? I’m always curious to see how this effect ends up being used in the wild :stuck_out_tongue:


We had a holiday party at work today, with a slideshow of photos of our building with a snow overlay effect (very unrealistic given we’re in southern CA). It looked pretty similar to your effect, Kirupa, but there was some variation in the snowflake shape. (Mostly circles with an occasional lumpy thing.) I’m mildly convinced it was running on some augmented version of your code. Not sure what the screens were running; very likely Windows 7 + PowerPoint.


Great overlay effect! This is perfect for our ski party coming up in a week. I have to present a web slide show of all the company members of our pittsburgh web design company and this looks perfect!


This worked perfectly!! Thank you!! :slight_smile: I was wondering (as I’m new to this) how or where would I insert a background image.


I have added the code to my website but it only works on my iphone when I view it on desktop I don’t see any flakes… what’s the problem?