Jquery Snowfall Plugin 1.4

Newer version available

 

Added a few new things, you can now make flakes rounded (Thanks Luke), and give them shadows (for lighter colored pages) – thanks for the idea Yutt. Also I fixed some bugs that cause horizontal bar flickering (I hope).

Download Jquery Snowfall 1.4

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

41 thoughts on “Jquery Snowfall Plugin 1.4

  1. Pingback: Jquery Snowfall Plugin 1.3 | Somethinghitme

  2. Pingback: Jquery Snowfall plugin | Somethinghitme

  3. Pingback: 雪を降らせる jQuery のプラグイン « ewq.jp

  4. Pingback: 雪を降らせる効果を表現するjQueryプラグイン-Jquery Snowfall : mignon-arrows

  5. Pingback: 100000dobuのページに雪が降ってます

    • @Danny, What browser? Also is it just flickering horizontally? I have an offset var in the code now, I think its set at 20, but you can make it larger so the flickering stops.

  6. If plugin has been applied for element with 100% width of body, for example header, we also have a problem with horizontal scroll.
    I’ve changed offset default value from 0 to 25, but it will be useful to add option for setting this value on plugin call.

    • @Tokolist Yeah I should of done that to begin with.. I really wanted to just try and fix it rather than going that route, but for the time being I’ll just add it as an option on call.

  7. Pingback: Weekly Digest for December 16th | BiscuitJam Blog

  8. I’m still learning about javascript and I was wondering where exactly I put the $(document).snowfall(); ? i want the snow to fall over my entire page…but just don’t know where to insert this line of code into the javascript.

    thanks.

  9. Hey

    I changed line 73 to:


    var flakeMarkup = $(document.createElement("div")).attr({'class': 'snowfall-flakes size-'+Math.round(this.size), '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});

    This gives the ability to modify the different flake sizes via css. I set different background images.

    Thank you for the plugin

    Kind Regards

    Lukas

  10. Hi, is it possible to have the snowflakes appear just on the body background and not over any other layers? I tried the flakeIndex but now go.

    Assume the page has the following markup and I only want snow around the container, not ontop of it:

    Content be here, no snowing here

  11. Hey
    This hauls my CPU clock…
    When I use it in Firefox or Chrome my they take 50% of my CPU…
    Any solution for that?
    reat plugin otherwise
    Cheers

  12. Pingback: Neve Em Seu Site Com jQuery Snowfall | Webmaster.pt - Marketocracia Digital

  13. Pingback: Pombaldir.net – Tecnologia Online » Neve Em Seu Site Com jQuery Snowfall

  14. There’s a bug with a vertical scroll on chrome and mozilla. Try to see at the scroll-bar on this page with google chrome browser!

  15. Pingback: 雪を降らせてるjavascript | ru_426

  16. I discovered your plugin on a wordpress theme and liked the effect. I added it to a web site that I developed for a friend of mine.

    Works great!

  17. This might be helpful to some but the snow is positioned by absolute. So if your div class is named snow you might want to add position:relative; to your snow class. This should help if you’re running into any snow positioning problems.

    .snow {
    width:650px;
    height: 242px;
    overflow: hidden;
    position:relative;
    }

  18. This is a very nice plugin. Very small and fast to run. I work for a group of newspapers and we’re running a contest where readers guess the date for the first snowfall. I put this on that page and have gotten comments from users, they think it’s kinda neat. 🙂

    I’ll also be building this into my HTML5Press WordPress theme. Thinking people might like to use this around Christmas or during winter to add a unique flare to their site.

    Thanks for this plugin Jason!

    • No problem glad you like it! I just updated it to 1.5 which adds snow collection using the canvas element, if you get a chance check it out and let me know what you think.

  19. Thanks, is a great plugin! Reason to share a small change, considering that snowflakes should be round and not square.

    i added: ‘border-radius’ : ‘8px’ in : snowfall.jquery.js , line 64.

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

    Happy Holidays,
    Marian.

  20. Pingback: スノーマン | ブログパーツのギャラリー BLOGPARTS DESIGN

  21. Pingback: 雪が降る季節となりましたので、jQueryで少し彩りを | キノめも

  22. Pingback: jQuery snowfallで画面に雪を降らせる | StarDustMemories

  23. Pingback: jQuery Snowfallプラグインの紹介 | 柴原ホームページ

  24. Pingback: Neve Em Seu Site Com jQuery Snowfall |

  25. Pingback: Neve Em Seu Site Com jQuery Snowfall.

  26. Pingback: Decorate your Blog for Christmas | Blogger Widgets

  27. Pingback: Christmas Snowfall Widget for Blogger | Blogger Widgets

  28. When resize the window we have a problem, my suggestion:
    $(window).resize(function(){
    $(document).snowfall(‘clear’);
    $(document).snowfall();
    });

  29. Pingback: 雪を降らせるjQueryプラグイン「snowfall」で上下逆に降らせる方法 | 武蔵野三鷹(吉祥寺)のスマホサイト・Web制作 cdbk.net CREATIVES.

Leave a Reply

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