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. Very nice but if i may wouldn’t be bad if the snow collected in a range of the upper border of the collectme element, so it wouldn’t have a sharp cut

  2. Clear the canvas with the clear-function also is easy, 2 lines have to be added:

    1. After (Line 195):
    var bounds = elements[i].getBoundingClientRect(),
    canvas = document.createElement(‘canvas’),
    collisionData = [];

    Add this line:
    canvas.className = “collectionCanvas”;

    2. After this (Line 262):
    $(element).children(‘.snowfall-flakes’).remove();

    Add this line:
    $(‘.collectionCanvas’).remove();

  3. I would suggest a minor tweak. If you have the shadow switched off and add a blurred box shadow to the mark-up you can get a nice depth of field effect. Our favourite setting is:

    'box-shadow' : '0 0 ' + (this.size -2) + 'px ' + (this.size -2) + 'px #ffffff',

    Adds a little realism 🙂

  4. Hey,
    nice plugin, but I encountered an error using the current jQuery-version: My debugger told me, that “this.target” near line 115 is undefined… You can simply fix this issue by adding
    this.target = $(this);
    above line 115.

    Greetings Maik

  5. Great animation, thanks a lot !
    I just tweaked it a little bit for fancier graphics, with animated background PNG file – I removed some style=”” from snowflakes’ div, and added custom style:

    .snowfall-flakes {
    background-image: url('_web/anim.png');
    background-size: 100% 100%;
    }

    Works in Firefox, has a fallback in others – no animated, but still snowflake 🙂

  6. Hello. I use a DOCTYPE and with this, the snow collection results are at the end of the page and not on the correct position. When i delete the DOCTYPE, everything works fine. Is there a way to let this plugin work with DOCTYPE too?

  7. Well i got an issue here lol. On Rockmelt, [Chromium Browser]
    It doesn’t recognizes some collectors, i’ve got a library.php, and i’m printing my header .. though it not recognizes the header.. just keep throwing error:
    TypeError: Cannot read property ‘x’ of undefined

  8. I like the plugin much. But it works for me not correctly, when i use Doctype 4.01 Transitional. When activate the collection, then the snow is not collect on the div, but on the bottom of the whole page. I try some things but nothing works. Can anybody help me?

  9. Pingback: Съвети и идеи за коледна украса на сайт | Veskoy

  10. Pingback: jQuery Snowfall 1.5 update now with snow buildup! « Blog

  11. Fab script and easy to implement.

    Would it be possible to add an option to use a letter for the snowflake for example the decimal code ❄ which represents a snowflake. My scripting knowledge is limited so I unable to do this myself.

    Thanks again for a fab script.
    Mike

  12. Pingback: 10 款基于jQuery/JavaScript的圣诞主题 – 90互联网数据中心

  13. Hi, looks like the jquery code was updated recently. Since the last time I looked about a week or so ago the “Snow Collection” option which I quite liked has become VERY heavy, it was nice and smooth before but on my decent machine it makes the browser very laggy, I can’t imagine what it would be like for slower machines

  14. Hmmm, must have been my machine – looks fine now although is a little processor hungry for a minor effect (Im sure the calculations are complex)

  15. Pingback: Add some Christmas Cheer to your Website

  16. How to use image.

    1.Open snowfall.jquery.js

    2. find it
    var flakeMarkup = $(document.createElement(“div”)).attr({‘class’: ‘snowfall-flakes’, ‘id’ : ‘flake-‘ + this.id}).css({‘width’ : this.size, ‘height’ : this.size, ‘background’ : options.flakeColor, ‘position’ : ‘absolute’, ‘top’ : this.y, ‘left’ : this.x, ‘fontSize’ : 0, ‘zIndex’ : options.flakeIndex});

    3.change it!
    div → img
    add src: “add imagefile path”,
    delete “‘background’ : options.flakeColor,”

    var flakeMarkup = $(document.createElement(“img”)).attr({src: “imagefile path”,’class’: ‘snowfall-flakes’, ‘id’ : ‘flake-‘ + this.id}).css({‘width’ : this.size, ‘height’ : this.size, ‘position’ : ‘absolute’, ‘top’ : this.y, ‘left’ : this.x, ‘fontSize’ : 0, ‘zIndex’ : options.flakeIndex});

  17. Really nice, but I have some position issues.

    When I call it like $(‘.class or #id’).snowfall(); it does adapt the dimensions (height, width) but not the margins. Is it possible it does not work with centered elements (margin: 0 auto;)?
    I tried 1.50 and 1.51.

  18. feelx Ill have to look, it should be able to do that, in the example on this page its snowing inside of an element.

    yasuhito Im going to implement the ability to add images finally (right now actually) since everyone wants it so bad 😛

  19. Pingback: せっかく冬だしクリスマスなのでこのブログに雪を降らせてみました

  20. Pingback: jQuery Snow Falling effect Plugin - DESIGNTOOLEXPERTDESIGNTOOLEXPERT

  21. Pingback: 10 款基于jQuery/JavaScript的圣诞主题效果 | jQuery精品集 - macapps.asia

  22. Hi,
    first of all, awesome plugin. Thank you. 🙂
    Works great, but when I try it on my mobile device also works great, even if I move device to left or right snow is falling in that direction. But, when I put my mobile device in landscape mod plugin don’t work, snow don’t fall. Can someone help?
    Thanks! 🙂

  23. if you have problem with this code when resizing browser window
    because you have use “position:absolute;” in your CSS code of page
    for solve this problem change :
    elHeight = $(element)[0].clientHeight;
    elWidth = $(element)[0].offsetWidth;
    in line 194 & 195 to :
    elHeight = window.innerHeight;
    elWidth = window.innerWidth;

  24. Hello. I use a DOCTYPE and with this, the snow collection results are at the end of the page and not on the correct position. When i delete the DOCTYPE, everything works fine. Is there a way to let this plugin work with DOCTYPE too?

  25. I would like to have a nice background image with a DIV in the middle. I only want the snow in the DIV to give the illusion of looking out a window. Any ideas? If I add a background it snows on the entire page.

    • I’m also looking to do something similar. I want the snow only in a certain area on the page (a snowglobe). Any ideas on how to do that?

      • Hey Lisa, you can do it like so

        $('#elementid').snowfall({your settings})

        for the vanilla vs use

        element = document.getElementById("yourelement");
        snowFall.snow(element, {your settings});

    • Hey jason, you’r gonna have to mask a DIV behind your window using absolute positioning and call the snowfall on your div link this $(‘#elementid’).snowfall({your settings})

  26. Pingback: Новогодний снегопад (snowfall) на jQuery для вашего сайта | ApoTeam

  27. Hi Loktar,

    I love your snow js but there is a big problem. On Android devices, tablets, Ipad etc the snow effect is very very slow! There is any solution for this problem?

    Thank you!

  28. Pingback: Los mejores efectos de nieve con JQuery & Tutoriales con Ejemplos « Central Render

  29. Pingback: Christmas Snow Effect, Countdown, Lights and Decorations for Websites

  30. Pingback: 圣诞节来点特效气氛 | 美设之家

  31. Pingback: 10 个jQuery/JavaScript的圣诞主题效果 | 乐享weby

  32. Aw, this was a really good post. Finding the time and actual effort to create a
    superb article… but what can I say… I put things off a whole lot and
    don’t manage to get nearly anything done.

Leave a Reply

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