jQuery Snowfall 1.5 update now with snow buildup!

Check out the new version here, with the ability to add images to snowflakes!

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

Added snow buildup to the plugin, so now you can pass a jquery selector in the collection option and the snow will collect on top of all the elements matched. It uses the canvas tag so the snow wont collect in IE8 or lower. To enable collection you can do the following

    snowfall({collection : 'element'});

Element can be either a class or id or a list such as

    $(document).snowfall({collection : '.elements'});
    $(document).snowfall({collection : '#element'});

Thats pretty much it for new options below is the standard way of using the plugin.

Invoking the snow

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

Snowfall Methods

    // stopping the snow
    $(document).snowfall('clear');
    $('#elementid').snowfall('clear');
    $('.class').snowfall('clear');

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
};

Example

141 thoughts on “jQuery Snowfall 1.5 update now with snow buildup!

  1. Pingback: Jquery Snowfall Plugin 1.4 | Somethinghitme

  2. Pingback: Jquery Snowfall script updated | Somethinghitme

    • Collection only works on Chrome/Firefox/Opera/Safari/ and IE 9 and above. If your trying it on one of those browsers and its still not working for you it *may* have something to do with styles/positions of elements that your trying to collect on.

  3. I was having the problem of no collecting, I found that the issue was that the canvas was not being positioned properly, and I just wasn’t seeing the collection. I fixed the issue by wraping the canvas in a jQuery object before setting the positional attributes (lines 199-203):

    var jQueryCanvas = $(canvas);
    jQueryCanvas.css(‘position’, ‘absolute’);
    jQueryCanvas.attr(‘height’, collectionHeight);
    jQueryCanvas.attr(‘width’, bounds.width);
    jQueryCanvas.css(‘left’, bounds.left);
    jQueryCanvas.css(‘top’, bounds.top-collectionHeight);

    • Ah Im not familiar with that plugin, Ill check it out and see why theres the errors. Also I released a pure JS version on my github account that should cause any issues with other jquery plugins.

  4. Hi can you show us the way so the choice of the users is save with cookie?

    Example: when someone chosse clear it, when refresh the page, it should be the same and not falling again, thank you

  5. Thanks for the great plugin. I was having problems with snow collection and I noticed the canvas object did not have the left and top position set so I manually added ‘px’ after the values.
    I made a couple of changes after line 197 and it’s working now.

    if(bounds.top-collectionHeight > 0){
    // Format values.
    var topPos = parseInt(bounds.top-collectionHeight) + ‘px’;
    var leftPos = parseInt(bounds.left) + ‘px’;

    document.body.appendChild(canvas);
    canvas.style.position = ‘absolute’;
    canvas.height = collectionHeight;
    canvas.width = bounds.width;
    // Position elements on the page.
    canvas.style.left = leftPos;
    canvas.style.top = topPos;

  6. Fantastic plugin.

    I was wondering for the collection option, if there’s a way to shake the snow build up when you move (or transform) the div? It would be a fancy way to shake off the snow and add some more effects.

    What are your thoughts?

    • Dave that would be *really* cool the only way I could do that would be to fake it though, the canvas portion is just a static image with no info on the snow saved.. hmm idk though I might look into it. I did consider adding a feature when you moved the mouse over the snow it would blow it around like a snow blower or something.

  7. Hello, a small patch for iPad. apparently resize is called periodically giving zero values, so had to patch this method to avoid flaked from stick on top.

    // Bind the window resize event so we can get the innerHeight again
    $(window).bind(“resize”, function(){
    if($(element).height()>0) elHeight = $(element).height();
    if($(element).width()>0) elWidth = $(element).width();
    });
    Best Lorenzo

  8. Pingback: jQuery Snowfall 1.5 | prosoxi.com

  9. Awesome plugin! This works great! This is just what I was looking for.

    One question though… Why does my background image keep shaking around?

  10. This is really cool, but I’m having some issues. The only way I can get the snow to collect on the proper element(s) is if I remove the doctype from the html. I really don’t want to do that since it screws my page up. With a doctype included at the top of my page, it collects at the bottom left corner of my page. (also, it doesn’t matter what doctype I’m using….same results for each.). Any ideas?

  11. Cory, Im not really sure 😕 I need to do some more testing on it for sure. Its probably due to element position. I put it in there not necessarily as an afterthought but its kind of a beta feature at the moment.

  12. Pingback: 10 jQuery and JavaScript Christmas Effects | jQuery4u

  13. Thanks for the awesome plugin!

    I am struggling to get it going though, I keep getting this error TypeError: Cannot read property 'element' of undefined on line 117.

    Any ideas?

    Thanks again!

  14. Pingback: 10 个jQuery/JavaScript的圣诞主题效果 - 博客 - 伯乐在线

  15. Has anyone got this to successfully work on a device using iOS 5? Safari crashes for me after like 10 seconds on both the iPhone and iPad running iOS 5. iOS 4 was fine. Here are my defaults:

    flakeCount : 40,
    flakeColor : ‘#ffffff’,
    flakeIndex: 999999,
    minSize : 1,
    maxSize : 4,
    minSpeed : 2,
    maxSpeed : 5

  16. Pingback: 10 个jQuery/JavaScript的圣诞主题效果 » 搜10网,有点儿意思

  17. Pingback: 10 个jQuery/JavaScript的圣诞主题效果 | java草堂

  18. Pingback: 10 jQuery / JavaScript effect of a Christmas theme - Open News

  19. Would love to see this working for IE8 (not for my personal use, but for a intranet site), if anyone can get it going I shall give an imaginary high-five to.

  20. You can fix the doctype/collector issue by making the following change:

    Instead of:
    canvas.style.left = bounds.left;
    canvas.style.top = bounds.top;

    Should be:
    canvas.style.left = bounds.left + "px";
    canvas.style.top = (bounds.top-collectionHeight) + "px";

    Thanx for nice plugin.

  21. Working on a site for Christmas using the round flakes currently but I would REALLY like to use a custom flake of my own is this something simple to do or no? Thanks for the help in advance as I can tell you are very responsive to users.

    • Sam B sorry for the late response.. idk how I missed this anyway the easiest way to add an image would be to modify the class used for the flakes, and give it a background image…. since so many people have asked for this though Im going to add an option for an image (not sure how soon Ill get to it though), also thinking of making randomly generated snowflake images using the canvas element.

  22. Needed a more graceful way to clear the snow (Currently implementing your plugin in an interactive snow globe). I added a new option: flakeClearDelay and modified the clear method with the following code:


    // clears the snowflakes
    this.clear = function(){
    var flakeTotal = $(element).children('.snowfall-flakes').length
    var flakeNumber = 1;
    var flakeDelay = options.flakeClearDelay;
    $(element).children('.snowfall-flakes').each(function() {
    var currFlake = $(this);
    setTimeout(function() {
    currFlake.fadeOut(300, function() {
    currFlake.remove();
    if(flakeNumber == flakeTotal) {
    flakes = [];
    clearTimeout(snowTimeout);
    }
    });
    flakeNumber += 1;
    }, flakeDelay);
    flakeDelay += options.flakeClearDelay;
    });

    };

    Love the plugin – thanks for your work.

  23. Hi all,
    This is a beautiful script especially with the collectme part. Seriously wow!
    I’m using it on my new portfolio website at eddiepotros.com if anyone wants to see the code (with Andrew & Adam Robert’s fixes/addons). Thank you so much for this!

  24. Bug FixUp
    Error: Cannot read property ‘x’ of undefined = this.target.x
    ==Before:==
    // Pileup check
    if(options.collection){

    Replace to
    // Pileup check
    if(options.collection && this.target){

  25. In regards to what Lonesome Walker said on 13 november.
    If you use it with jquery backstretch you get the bug that snow is only falling on 1px height at the top.
    Solution:
    -Enclose your website in another div (e.g. #snow)
    -update your div width and height if window resizes and when page loads.
    -apply snow effect on that id (e.g. $('#snow').snowfall();)

    Thanks!

  26. Pingback: faire neiger votre page avec css 3

  27. Very nice plugin. Is it possible to initiate several/multiple .snowfall() on different elements of page? Right now, I call them $(‘.snow1, .snow2, .snow3’).snowfall() but only 1st one works, others are static (snow is shown but not moving)

  28. here’s the demo of what I was talking about (for some reason, the post wont be published if link, so replace DOT with “.”): jsfiddleDOTnet/matija/Df4Pz/

    • Thanks for the heads up Loir, Im going to have to take a look at the buildup code some more, for sure. The best solution most likely is to have it clear on resize.

  29. Used this on my website @clickmatch.com due it having a seasonal theme. Excellent work it looks amazing. I try not to use plug ins but this is a case it’s warranted.

    I also gave you credit at the bottom of the page. Thanks!

  30. Pingback: Make It Snow on Your Website With CSS Keyframe Animations | Design and Technology

    • Not currently.. but I’ve been asked a lot to implement it. That will be the next update I suppose. Have a couple of cool ideas for it as well.

Leave a Reply

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