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.

  • Fancy Transitions Featured Gallery for WordPress (62)
    ftFeatured is Wordpress plugin for creating image gallery with fancy transition effects of featured posts. You can choose between three types of transition effects: curtain, wave and […]
  • Create image gallery in 4 lines of jQuery (146)
    Few days ago friend asked me to build image gallery with thumbnails for her web page. Request was pretty simple, she wanted large image and few thumbnails bellow that. Also, large image […]
  • Coin Slider: Image Slider with Unique Effects (1638)
    After jqFancyTransitions I decided to release new jQuery image slider plugin with more unique transitions effects. I have ideas for new effects and after I didn't find that somebody […]
  • Animated Progress Bar in 4 lines of jQuery (51)
    Progress bars are really useful to indicate to user that something happens and when it will be approximately done. They are useful on page where assets should be preloaded before page is […]
  • Image gallery in 4 lines of code with MooTools and Dojo (8)
    Recently I wrote article how to create image gallery with description in 4 lines of jQuery code. Now, I will do the same thing with two other popular JavaScript frameworks, MooTools and […]

114 comments on "jQuery Snow Falling plugin"

Is it possible to constrain the snowflakes inside a div?

Devin Kerr on October 10, 2013 at 7:46 am

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

Vu Nhat Anh on September 21, 2013 at 6:06 am

Simply Super! Nice!
Thanks!

Ravichandran on September 6, 2013 at 9:30 am

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

Noah on June 27, 2013 at 2:01 pm

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

sami on May 16, 2013 at 9:27 am

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

suresh on April 13, 2013 at 7:04 am

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.

Josh on January 9, 2013 at 5:56 pm

@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

Josh on January 9, 2013 at 5:55 pm

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

@Webnovant
Thanks for support!

Lazarevic Ivan on December 25, 2012 at 8:24 pm

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

veysi on December 25, 2012 at 10:21 am

Great job. It’s beautiful!

Thanks !!!

Novicesp on December 24, 2012 at 4:31 am

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

Joe Zee on December 23, 2012 at 4:09 am

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!

Webnovant on December 21, 2012 at 6:59 pm

Thank you so very much! It is beautiful!

Johna Kraft on December 21, 2012 at 2:21 pm

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

any suggestion

thanks

roybatty on December 21, 2012 at 11:55 am

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.

Armando on December 11, 2014 at 8:50 am

its Amazing…………..nice

Kunal Bhatu Salunkhe on December 19, 2012 at 12:10 am

Script has a problem with processor load in IE

tested on December 18, 2012 at 5:39 pm

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!

Cooshtee on December 18, 2012 at 7:56 am

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

Hans on December 17, 2012 at 11:03 am

The best snow effect! Thanks

Bik on December 14, 2012 at 6:45 am

@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!

Oskar on December 12, 2012 at 11:07 am

Leave a Reply

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