jQuery Snow Falling plugin

I like winter because of holidays and snow. Not big fan of going to shopping and buying New Year gifts and presents, but I am fan of snow and snowboarding. That’s why I enjoy watching how snow falling even if that’s only on my monitor.

jquery-snow

Idea is to create one snowflake initially, clone that snowflake at some time interval and add random values for properties for each of them. And it’s done in less than 1kb minifed.

First include jQuery and jquery.snow.js or jquery.snow.min.js in head of your document:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script src="jquery.snow.js"></script>

Than, anywhere in you document call snow plugin like this:

<script>
$(document).ready( function(){
        $.fn.snow();
});
</script>

This plugin have few options that you can play and adjust snow falling effect:

minSize - min size of snowflake, 10 by default
maxSize - max size of snowflake, 20 by default
newOn - frequency in ms of appearing of new snowflake, 500 by default
flakeColor - color of snowflake, #FFFFFF by default

Parameters can be passed like this:

$.fn.snow({ minSize: 5, maxSize: 50, newOn: 1000, flakeColor: '#0099FF' });

Be careful with newOn parameter since that frequently appearing of new snowflake can affect on performance.



Comments [ 68 Comments ]

  1. umair
    January 29, 2012

    hi i want to write a post as a guest on your blog.please accept my request.

  2. Rafael Kuvasney Marcolin
    January 31, 2012

    Wow! Nice stuff! I made some changes to work with a snowflake picture! Awesome!!

  3. Dusan
    February 9, 2012

    Cool. The most tricking part while tinkering about how would I make this effect was how to produce snowflake itself, but it it turns out to be just a decimal code. haha.. nice

  4. invoguesoft.com
    March 21, 2012

    wow Nice creation.

  5. Eyewebmaster
    April 24, 2012

    Very cool features for Jquery. I’ll keep this so that when it is time for Christmas I’ll use it. Thanks once again.

  6. I-Design
    June 13, 2012

    Perfect!!

  7. Windsor
    August 14, 2012

    Hey, gr8 plugin and thx for sharing it, am writing from Colombia, and i wonder if theres any way i can stop the snow falling from a button or a call via js. thx for the answer.

  8. Dan
    September 25, 2012

    Love it! Thank you!

  9. Daniel
    October 12, 2012

    body {
    overflow: hidden;
    }

    gets rid of scrollbars

  10. sihab himu
    October 22, 2012

    free downlads site

  11. Divya
    October 25, 2012

    Woh .. Good thiniking ..

  12. sul4bh
    November 1, 2012

    Nice one. Use of .animate() was smart.
    Check out my similar plugin:
    http://www.ytconvert.com/sul4bh/jquery.snowfall/

  13. Your Christmas Countdown
    November 18, 2012

    This is a great script. Thanks for sharing – we are using on our new website.

    In response to Daniel’s suggestion of using overflow:hidden on the body tag, I would suggest changing the element that has the snow appended to (body by default) to your main website container and then just amending the ‘endPositionTop’ to stop the snow falling below the height of the website.

    Hope that makes sense for anyone that needs it and thanks Ivan for this fantastic script :-)

  14. trần công nghiệp
    November 19, 2012

    downloaded ! ~~ nice plugin

  15. Skii
    November 21, 2012

    my snow is falling continuously in firefox and ie, but in safari and chrome it is falling to a point and disappearing , can anyone help me with this prob????

  16. Laurie
    November 26, 2012

    Great plugin!! Is it possible to only have the snow fall inside of a div? Thanks

  17. felix
    November 27, 2012

    i using jsnow plugin. my problem is when i load flash with this plugin, the flash get slowed. How can i stop this plugin and restart my flash stuff is over

  18. annieb
    December 4, 2012

    @Laurie – in the jquery file, change the element the snow function is appended to from body to whatever div you would like. Removing or hiding this div from the DOM will also neatly force the snow to stop falling.

  19. Lazarevic Ivan
    December 7, 2012

    thank you all for positive comments.

    for minified version of plugin there is updated version with fix for this issue https://github.com/kopipejst/jqSnow/issues/1

  20. Oskar
    December 12, 2012

    @annieb how could I do that? I tried to change the element the snow function is appended to from body to another div, so I tried like this: .appendTo(‘background’) // because “background” is the class name of my div but nothing happens //

    Hope you could help me, I´m kinda newbie :) thanks!

  21. Bik
    December 14, 2012

    The best snow effect! Thanks

  22. Hans
    December 17, 2012

    Hi,

    I tried to paste the plugin into my website, but I must be doing something wrong. I use dreamweaver for my website.

    Can somebody tell me what to do and how to incorporate the snowflake plugin into my site. You can look at the source of my index page to see how I have got it done now.

    Feel free to paste the necessary lines and correct the plugin, so I can copy/paste your message into my dreamweaver source coding and upload.

    Thanks for the help!

    Regards,

    Hans

  23. Cooshtee
    December 18, 2012

    Oskar – dotn forget the full stop before the class name…

    .appendTo(’.background’)

    also ensure that your .background class is set to ‘position:relative’

    Great plugin!

  24. tested
    December 18, 2012

    Script has a problem with processor load in IE

  25. Kunal Bhatu Salunkhe
    December 19, 2012

    its Amazing…………..nice

  26. roybatty
    December 21, 2012

    I can’t set color of snow flake that is “black”

    any suggestion

    thanks

  27. Johna Kraft
    December 21, 2012

    Thank you so very much! It is beautiful!

  28. Webnovant
    December 21, 2012

    Thanks a lot! Extremely easy to use and customize, great work!

    I wrote a post on my blog (in Spanish) to show this fantastic plugin, I hope you’re not disagree with that.

    Thanks!

  29. Joe Zee
    December 23, 2012

    Same problem as roybatty, my snow is black, looks like kinda industrial Christmas :))

  30. Novicesp
    December 24, 2012

    Great job. It’s beautiful!

    Thanks !!!

  31. veysi
    December 25, 2012

    always use scroll bar and does not disappear!! when hit the bottom of page animate the scroll bar..

  32. Lazarevic Ivan
    December 25, 2012

    Latest version fix ‘black snow’ issue https://github.com/kopipejst/jqSnow/downloads

    @Webnovant
    Thanks for support!

  33. Josh
    January 9, 2013

    @Hans,

    in case anyone else runs into the same trouble as you and I was having.

    Firstly if you have a service like ‘ClouldFlare’ make sure you disable it temporarily.

    Second make sure you place the the following code in the header:

    Make sure your ‘jquery.snow.js mataches what you have on your site because there are newer, differently named versions.

    Thirdly make sure you place the script:

    $(document).ready( function(){
    $.fn.snow();
    });

    within your tags, this is very important!

    then you should be all set :)

    Thanks for making this!

    -Josh

  34. Josh
    January 9, 2013

    oops it doesn’t like coding, makes sense.

    just make sure to put the first two lines of code they have above in the same order.

  35. suresh
    April 13, 2013

    hi..
    very nice post..but snow image is not visible in asp.net
    anyone can post the solution for this problem?

  36. sami
    May 16, 2013

    can we change the flake to a custom png image i have?

  37. Noah
    June 27, 2013

    I’m curious about Sami’s ^ question as well. Any ideas for a custom png?

  38. Ravichandran
    September 6, 2013

    Simply Super! Nice!
    Thanks!

  39. Vu Nhat Anh
    September 21, 2013

    jQuery Simple Snows from: http://snows.nhatanh.net/
    You can edit the option, live preview on your website and then get the embeded code very easy!
    Demo: http://snows.nhatanh.net/demo.html

  40. Devin Kerr
    October 10, 2013

    Is it possible to constrain the snowflakes inside a div?

  41. Tom
    October 24, 2013

    Great effect, Christmas coming soon :) Simple implementation. Great job!

  42. Manikandan
    November 16, 2013

    Its really nice and looking good.

  43. Douglas Oliveira
    November 19, 2013

    Thank you for this very cool (rs) plugin.

  44. Slavisa
    November 21, 2013

    Izgleda da ne radi na win-XP.
    Testirano na Chrome.

  45. Werner Vanhorenbeeck
    November 26, 2013

    Hi,

    Thanks for this nice plugin.
    For those who need a functionality to stop the snowfall, I have written a version with a stop function.

    $.fn.stop();

    http://www.mediaxis.be/downloads/jquery/plugins/jquery.snow.min.1.0.js

    Keep up the good work!
    Best regards

  46. mike
    November 27, 2013

    how can i add this to my wordpress?
    thnx

  47. kev
    November 27, 2013

    it works nicely, BUT
    when you open an image with prettyhphoto.js or other method of displaying images nicely it pushes the image at the bottom of the page
    I used it in my wordpress site (but removed it after the pics stop working right)

  48. Chris Harding
    December 2, 2013

    How do you make the snowflakes always appear on top of everything as they are going behind the images on my site?

  49. gabba
    December 3, 2013

    Thanks – works very good!

    @Chris Harding
    put this line in your css:
    #flake { z-index:200 }

  50. Atar
    December 5, 2013

    Hi there,

    Great plugin, but here’s a question

    How can I “let it snow” only in a specific area, over a single image for example?
    I need it to work on an area 720px x 576px from the top left corner.

    Can anyone help? I’m really not that good with js.

    THANKS!

  51. Atar
    December 5, 2013

    ok, figured it out!!!

  52. Jakub
    December 6, 2013

    Hello! Can somebody explain me how to use it in WordPress? I have been trying to do it in many ways and it still dont works…

  53. JCPerez
    December 6, 2013

    @Jakub i already used in a wordpress site, just download the file “jquery.snow.min.1.0.js” upload it to ur site via ftp then call it from ur “functions.php” file and then add the lines

    $(document).ready( function(){
    $.fn.snow();
    });

    in ur “header.php” file or anywhere in ur blog.
    See it working at http://topfloormarketing.net

  54. Roger Stenson
    December 7, 2013

    I regret I have little experience with Java
    I have stored your routine as downloaded in a folder called App_code
    with the name snow.js. The site works OK till I insert your code
    I clearly don’t want to mount this revised master page till it works.

    I am trying to deploy the snow effect across my website and have
    inserted the script invocation in the Visual Studio master page as follows

    Each execution produces the following Compilation Error Message
    JS1004: Expected ‘;’
    I have tried putting , in all over the place to no effect.
    I would be grateful for your comments on my error


    Bawburgh Bridge Club Master Page
    Bawburgh Bridge Club Master Page

    document= C:UsersRogerDropBoxBridgeResultsWebSitesBBCBBCMain.Master;
    $(document).ready( function(){,
    $.fn.snow();
    });

    etc for the rest of the page

  55. Craig
    December 11, 2013

    Have tried to implement this on to my website.

    When a flake hits the bottom of the page, it increases the height of the the page so I start getting scrollbars.

    Is there a way I can avoid this? Thanks.

  56. Han
    December 13, 2013

    Hello,

    May I know where to change the pattern of snow flake.

  57. Jacques
    September 16, 2014

    Hey,

    Great script… Is it possible to add it in one div instead of the entire page? I want it to snow on an image…

    Thanks! :)



» Trackbacks and pingbacks click to expand

  1. [...] 눈내리는 효과 내는 플러그인 [...]

  2. [...] (we should be able to make the wider!), I created a quick, wintry scene to act as a backdrop. This jQuery snowfall plugin seemed to perform the best. Note that if you’re running snowfall on a Mac, it renders much [...]

  3. [...] can download jquery.snow.js file from WORKSHOP owned by Ivan Lazarevic (the author of snowing script code), then upload this file somewhere on internet and use it for [...]


Leave a Reply

More Articles


more on WORKSHOP.rs