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:

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

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:

[javascript]
$.fn.snow({ minSize: 5, maxSize: 50, newOn: 1000, flakeColor: ‘#0099FF’ });
[/javascript]

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



Comments [ 94 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

    • Armando
      December 11, 2014

      Hi Roybatty!,

      It seems there is a typo on the function, replece the parameter for this (flakeColors) or just add an “s” to the end.

      regards.

  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.

    • Matt
      November 11, 2014

      In case somebody else reads this….Just adjust the documentHeight value (-20 or greater works) in the js. If you increase the size of the flakes, you’ll have to readjust the doc height if there is overlap.

  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! :)

  58. Ziggy
    September 24, 2014

    Yes is it possible to use on a div? Please help!

  59. Ryan Gittings
    October 27, 2014

    Great plugin!

    Was looking for one with Christmas coming up, my gosh doesn’t time fly. Always a nice little feature to add at Christmas time! I’ll be adding it to my web designs very shortly.

    Thanks!

  60. Solum
    October 27, 2014

    I am trying to create this site but I wanted to get a falling snow background onto it. But I have tried everything and even videos on youtube did not help. Do you know how to make the code work? If so please respond very much help needed!

  61. chinthana
    November 11, 2014

    nice and easy configuration…..
    are there any option to stop snowing because some users many not be like that?
    :)

  62. Georg
    November 30, 2014

    Hi,
    trying to implement snwo on our website I copied the source code for the snow of your above demo page.
    As our website’s colour is light blue, I changed the colour of #flake from white to dark blue.
    This works fine with latest version of IE, Chrome and Safari – only Firefox does not change the snow-colour!??
    Any ideas or hints?
    NB: have not yet uploaded the “snowy”-version of our website yet due to the above problem!
    Thanks in advance for your help,
    Georg

  63. Pavelk
    December 3, 2014

    Thx!

  64. Nathaniel Brown
    December 3, 2014

    I was playing around with your code and it quite nice but I don’t see a way to restart it or expand the flake area if the screen size changes like if you go from landscape to portrait. Or do you?

    • Nathaniel Brown
      December 4, 2014

      I got it to work. I reset the document sizes by adding
      $(window).on(‘resize’,function () {
      documentWidth = $(document).width();
      documentHeight = $(document).height();
      });
      inside the setInterval function.

  65. Rajesh
    December 4, 2014

    How to disable this function for mobile or tablet devise.

  66. Josie
    December 4, 2014

    Hi. This is great in all browsers, except for older versions of IE. Has anyone else had this problem or knows how to fix it please?

    Thanks :)

  67. Thomas
    December 5, 2014

    Hi,

    I try your plug’in.

    It is very great but in some device with Firefox or Chrome flakes are light blue.

    Do you know why ?

  68. Himanshu
    December 12, 2014

    Awesome! working on my blog http://androiddelta.com
    Although, a minute glitch is present. When mouse hovered on the falling snow cursor changes. Rest all is stunning.

  69. J
    December 15, 2014

    How do I put it into my blog?

  70. Jason Judge
    December 17, 2014

    Nice little script. One thing I’ve changed to make it easier and more flexible to use:

    Remove the “id” attribute. Having all the flakes take the same ID is not valid HTML. I replaced it with a class.

    The class can then be used to add other attributes. One I have found works with a lot of themes is to set the z-index to -10. This shows the flakes in the background of a theme, over the body tag, but hides behind any central content wrapper on your page. The snow flakes then don’t fall over your content, which may not be desirable.

    The animate does eat a fair chunk of CPU though. I’m not sure if there is some way to decrease the load that the animate imposes on the browser.

  71. Deco
    December 21, 2014

    Hi,

    I’m trying to install it, but I don’t know why it’s not working.

    I put theses lines into my head:

    Then this inside my body:
    $(document).ready( function(){
    $.fn.snow({minSize: 10,maxSize: 20,newOn: 1250,flakeColor: ‘#FFFFFF’ });
    });

    So Can you help me please. Thank you.

  72. Alison
    December 23, 2014

    this works great.. am wondering how to make the snow “accumulate” at the bottom of the page? Just an added feature that would be neat. :-)

  73. Boris
    December 30, 2014

    If someone has a rendering bug in chrome try this:

    #flake {
    border: 1px solid transparent;
    }

  74. Rumen
    January 10, 2015

    But can we have hearts

  75. Oleg
    January 14, 2015

    Both scripts loaded but got an error:
    Cannot read property ‘snow’ of undefined;

  76. Liliana
    January 22, 2015

    Simply Genial

  77. baterai double power
    February 1, 2015

    good job your tutorial great work

  78. Nice tutorial!

  79. Tom
    April 12, 2015

    Great tut, 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 […]

  4. […] 1. jQuery Snow Falling Plugin […]


Leave a Reply

More Articles


more on WORKSHOP.rs