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.

  • Coin Slider: Image Slider with Unique Effects (1617)
    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 […]
  • Gradienter: Add gradient to elements (22)
    Last night I started to work on Wordpress theme for blog and I got an idea that every post should have their own background color and that maybe those colors can be in gradient. Since that […]
  • jqIsoText: jQuery Text Effect Plugin (101)
    Some content on our pages are more important than other and we want to made him eye catching. There are lot of techniques to achieve that.  One of them is jqIsoText. With this […]
  • Just Random Color (0)
    Some time ago I was working on app where for each category we had to assign random color in case that user didn't choose one. A few day ago I needed to generate random color again. Instead […]
  • Image gallery with fancy transitions effects (1022)
    I was looking all over the Internet for some jQuery gallery plugin with some interesting transition effects. I found a lot of great plugins but they all have pretty same transition […]

106 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 *