17 Feb

Snow effect done in HTML 5

This is another useless but cool effect you can do in HMTL 5 (See also: Water ripple effect done in HTML 5 and Starfield animation done in HTML 5), let it snow:


This is a simple algorithm that initializes each snowflake with a set of random values like position, size and so on, and then just iterates each frame over each flake to change its position depending on the size of the flake, Math.sin() ftw!
Since drawing circles on a canvas is pretty slow i create a 8×8 pixels big snowflake canvas beforehand and then just copy the snowflake canvas onto the main canvas with the new calculated size which is much faster.

The snowflakes are only rendered in a 300 pixels wide strip no matter how big the canvas is, then the strip is copied again and again over the canvas to save on CPU time.
The repetition is a bit visible but only if you look out for it.

Enough yapping, here is the code, just open it in a browser: Snow effect in HTML5
If you are using this on your website and you are a nice person you can show it by giving me a credit (backlink) somewhere on your page, thank you!

Pleas note the more Flakes you render (Either by setting a high height for the canvas or increasing flakeNumberModifier) the more CPU load you create.

4 thoughts on “Snow effect done in HTML 5

  1. I really love this snowfall effect and would like to use it, but I am unable to figure out how to put a jpg into it like the santa with the camels box. It’s for limeybroad.com . I have a flash effect going now but many cannot access it so I’m going to change it to html 5.
    It’s like a foreign language to me…please help and tell me where the jpg goes!

    Thanks, Mike

    • hi, the download contains everything needed to produce the effect seen above, just replace the picture. if you copy it to your own page make sure to copy the html, css and js alike.

    • hi,
      change the second number on line 107 (“size: Math.max(range(1, 4), 2),”) to a higher number to also have bigger flakes. if you want to have all flakes bigger change all numbers. When making them bigger you might have to adjust speed with the “fallSpeedModifier” variable.


Leave a Reply to Mike McCardle Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.