Snowfall 1.6

Repo on Github
Download Jquery Snowfall 1.6
View the plugin in action

You can now use images for snowflakes!

// jQuery vs
$(document).snowfall({image :"images/flake.png", minSize: 10, maxSize:32});

// purejs vs
snowFall.snow(document.body, {image : "images/flake.png", minSize: 10, maxSize:32});

Invoking the snow

    $('#elementid').snowfall({flakeCount : 100, maxSpeed : 10});
    $('.class').snowfall({flakeCount : 100, maxSpeed : 10});

Snowfall Methods

    // stopping the snow

Options currently supported with default values

options = {
	flakeCount : 35,		// number
	flakeColor : '#ffffff', // string
	flakeIndex: 999999,		// number
	minSize : 1,			// number
	maxSize : 3,			// number
	minSpeed : 2,			// number
	maxSpeed : 3,			// number
	round : false,			// bool
	shadow : false,			// bool
        collection : 'element'          // string


33 thoughts on “Snowfall 1.6

  1. Pingback: jQuery Snowfall 1.5 update now with snow buildup! | Somethinghitme

  2. How to use image – fix on FF and Opera chrome safari ie

    1.Open snowfall.jquery.js

    2. find it
    var flakeMarkup = null;
    if(options.image){ flakeMarkup = $(document.createElement(“image”));
    flakeMarkup[0].src = options.image;
    3.change it!
    (“image”)); ——> (“img”));

    var flakeMarkup = null;
    if(options.image){ flakeMarkup = $(document.createElement(“img”));
    flakeMarkup[0].src = options.image;

  3. I am using e107 CMS and I cannot get this to work. I put the files in the root directory. I have no idea in what file and where to place $(document).snowfall(); to get it to work. Anyone mind helping me out?

  4. Pingback: Laat het sneeuwen op je website met deze gratis jQuery plugins | Pixelmountain - Pixelmountain is een designblog, met focus op webdesign en web development, creative photoshop tutorials voor je website, inspiratie en showcases op het web, en moderne desig

  5. Hi Jason,

    First of all, nice plugin, thanks for sharing! One thing that could be improved (IMHO) is how the snow collects. If you use round snowflakes which are bit bigger (e.g. 8 px) the collected snow seems to be made out of blocks. Check out the screenshot below for an example of what I mean:

    • Hey Bas, yeah the snow collection is just done with blocks, I need to rewrite the collection portion Im not really a fan in how it works overall. Im thinking it would be better to have a canvas element over the whole page and just use canvas snow so any type/size could collect. Only problem is it would alienate older browsers.

  6. Hey i am newbie so don’t know that much about this stuff.I just need to know whether this will work on website.If yes can you post the steps for it.I m using vs2008.

  7. Hi,
    great script. Just wondering if there’s a way you can make the snow flakes fade on and off rather than just appearing and disappearing abruptly? Or at least fade off? Or a way of extending the time they are on screen for before they are cleared?


  8. hey,

    is there a way or any built-in support to stop (not clear) the snow fall after a while may be 3-5 seconds and keep the collected snow flakes at the bottom.


  9. Pingback: サイトに雪を降らせる方法

  10. Is there any way to get the snow to only show inside a div? I want to have a div centered on the screen, with the snow ONLY IN THAT DIV.

    This is what I do:
    $(‘#window’).snowfall({flakeCount : 80, maxSpeed : 5});

    Yet the snow continue to fall over the whole page…what am I doing wrong??

    • Correction…it seems the snow is only falling within the width and height of the div I’ve specified, , not across the whole screen. However, I have the div centered using margin: 0 auto, and the snow is coming down from the top left of the browser. So while the width and height of the snow is correct, it’s not contained within the div.

  11. Pingback: ワードプレスに雪を降らせてみませんか? | Exnity

  12. hi,

    Thanks once again, I have just noticed that the collector doesn’t collect snow-flake images, All i have is boxes all over the place. Can is there anything i can do about that?

    Any fix please?

  13. Pingback: クリスマスシーズンなので、ブログやサイトに雪を降らせるsnowstormを設置してみた |   JUMP-UP.INFO

  14. Pingback: ブログやサイトに雪やら色々降らせるJqueryプラグイン「snowfall」の設置 |   JUMP-UP.INFO

  15. Pingback: 3Dで雪を降らせるJava Script「Snow in 3D」を設置してみた |   JUMP-UP.INFO

  16. Loktar,

    Thank you for developing this useful code.
    I am using the jQuery file for the snow effect but it only seems to appear at the very top of the forum. I do not seem to be able to adjust it to allow the snow to fall on the whole document from top to bottom. Would you be able to point me to the proper bit of jQuery code to adjust that? I would like to put something like $(window).height() in the file so it has the effect I wish but my attempts at adjusting it fail. Adjusting clientHeight does nothing!

    • I was able to figure it out as I was not using the code properly.
      One must use the container ID in the calling of the function, like this
      (wrapper being my forum container id):

      However, the snow collects as small blocks on the bottom of the page instead of on the container class I referenced under .. collection: .myclass .. perhaps I have configured it incorrectly although others on here have reported the same occurrence.

  17. Pingback: HPヘッダ画像の中に「雪の結晶」を降らせる方法 | Global Edgewalk

Leave a Reply

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