Jquery Snowfall Plugin 1.3

Plugin has been updated to 1.4 please go here for more up to date information

*Updated* fixed a bug, and added an example file to show how to use the plugin.

Added a few new things to the Jquery snowfall plugin, you now have the ability to clear the snow from elements, chaining is supported, and element matching is supported. Its funny today was the hottest day of the year so far and I decided to work on a script to make it snow.

Download Jquery Snowfall 1.3.1

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

Example

44 thoughts on “Jquery Snowfall Plugin 1.3

  1. Pingback: Jquery Snowfall Plugin 1.3 « Somethinghitme | Source code bank

  2. Great function!
    I’d like to suggest the following change:

    In order to get snow on element padding I’ve changed:
    $(element).height() to $(element).outerHeight()
    and
    $(element).weight() to $(element).outerWidth()
    in lines 104, 105, 110 and 111

  3. I notice you use document.ready in the example on this page. Is that the key to getting this to work when targeting a specific ID or class?

  4. Pingback: Jquery Snowfall script updated | Somethinghitme

    • Alright I updated it, its fixed now, had to remove outerheight, and outerwidth as they seem to be having issues if the plugin is called on the whole document. Ill have to work on that some more later on.

    • You can clear the elements its snowing on after a while, I updated the zip and it includes an example of how to stop it from snowing after 5 seconds.

    • That is friggin awesome! Im working on mine currently.. but its not nearly as cool. Thanks for posting press space btw.. i tried arrows, w, a I almost gave up trying.

  5. Pingback: jQuery Roundup | tips & tricks

  6. Hey Jason… I’ve seen this script at work and it’s awesome… unfortunately I cant get it to work on my site, I’m quite a newbie at website design… I’ve set another snow script up in my site but I’d rather use yours… ehmmm. I dunno, can you have a look at my site and give me a hand, I’d really appreciate it! :)
    thanks a lot

    • @Darshan Solanki if you download the .zip theres a file in there called index.html which has everything you need to get started. Main things you have to do is make sure to have Jquery included on your site, and you can just call $(document).snowfall();

  7. Hey man. First off, I want to say that this is a great little creation that you made. All the other snow jquery plugins that I’ve come across are extremely tacky. Yours on the other hand, is simple and looks very clean. I dig it.

    One thing I noticed though is that when I’m calling the function like this: $(document).snowfall(‘clear’); , the snow stretches the width of the page and the width scroll bar fluctuates back and forth.

    • Thanks for the compliment, thats why I made it I didn’t want huge images falling everywhere. I remember that issue from last year actually.. someone had a solution Ill have to look for it something to do with the exact size of padding required. Ill find the fix and update it.

  8. A little suggestion that I worked out is to use CSS 3 – with a border-radius of similar size to your minimum size of flake. This will “round” the design and therefore look more pleasant in my view. You can add this even for IE browsers using a useful little script you can find here http://www.fetchak.com/ie-css3/

    And thanks for this addition to some seasonal web design! In Glasgow it is exactly like this right now so it is very welcome :) Using it on our business website until the weather changes! Great script and Merry Christmas.

    • @Luke wow that looks really nice! I will add an option for rounded flakes now. Thanks for that, looks even more clean in my opinion.

      @Adam, I got an error on your page in relation to $(‘#gallery3 a’).lightBox(); “Uncaught TypeError: Object # has no method ‘lightBox’” I dont know if thats whats halting the whole thing, but thats seems to be the only page with that error.

  9. This is such a great plugin, all the others look terrible and are slow but this one is really nice.

    I’m just having a problem with it on my homepage for some reason, it just doesn’t load but for every other page it works just fine. Is it because there is a php redirect at the start of the code for the index.php page? All the other jquery and scripts work fine too it’s just the snow that isn’t falling.

  10. Thank you…. the snows are worked….!!!

    $(document).ready(function(){
    $(document).snowfall({flakeColor: ‘silver’, maxSize: 6, flakeCount: 35});
    });

  11. awesome function man…! just what i need, thank you for sharing. can i a little bit suggest a bug fix in next version ? when i use fullscreen on my ff8 the snow wont falling down. that’s all

  12. Pingback: snowfall.jquery.jsで、サイト内に雪や羽を降らせる

  13. Pingback: Неплохой снег для вашего сайта на jQuery | ApoTeam

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>