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

    $(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

26 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;
    }else{
    3.change it!
    (“image”)); ——> (“img”));

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

  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:
    http://awesomescreenshot.com/0afqsaj74

    • 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 asp.net website.If yes can you post the steps for it.I m using vs2008.
    thanks

  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?

    Thanks!

  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.

    Thanks

  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

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>