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 (1616)
    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 (100)
    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 (1021)
    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 […]

104 comments on "jQuery Snow Falling plugin"

Hi there, I am using this plugin on my site and it looks amazing. I am having one issue, and that is the flakeColor feature isn’t working. All I am seeing in the html is a call to an svg.

https://s.w.org/images/core/emoji/2/svg/2744.svg

The color does not change. Any thoughts?

KL on October 7, 2016 at 4:29 am

One of the best snow effects jquery plugin.

Tom on April 21, 2016 at 10:26 am

If someone has a rendering bug in chrome try this

Salomon Speedcross 3 on March 11, 2016 at 11:54 am

Awesome..

Rahuman on December 17, 2015 at 9:50 am

Hello,
The script is really good.

The only thing i found missing is the ability to append the snow on a specific element like a fixed div that would be in frond of all other in screen 😉

That is easily done of course by changing the append element in the script itself but it could be handy to become an actual option.

Alexander on December 3, 2015 at 12:01 pm

Good Job, Thanks.

sathish on October 1, 2015 at 2:17 pm

Great tut, thanks!

Tom on April 12, 2015 at 9:03 am

Nice tutorial!

Jaysen Freelance web designer London on February 12, 2015 at 10:37 am

good job your tutorial great work

baterai double power on February 1, 2015 at 2:25 pm

Simply Genial

Liliana on January 22, 2015 at 11:56 am

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

Oleg on January 14, 2015 at 9:55 pm

But can we have hearts

Rumen on January 10, 2015 at 8:58 pm

If someone has a rendering bug in chrome try this:

#flake {
border: 1px solid transparent;
}

Boris on December 30, 2014 at 9:03 am

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. 🙂

Alison on December 23, 2014 at 2:39 am

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.

Deco on December 21, 2014 at 6:47 pm

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.

Jason Judge on December 17, 2014 at 1:48 pm

How do I put it into my blog?

J on December 15, 2014 at 12:48 pm

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.

Himanshu on December 12, 2014 at 11:01 am

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 ?

Thomas on December 5, 2014 at 8:35 am

This is amazing!

Danl on July 9, 2015 at 1:59 pm

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 🙂

Josie on December 4, 2014 at 2:28 pm

How to disable this function for mobile or tablet devise.

Rajesh on December 4, 2014 at 1:24 am

Leave a Reply

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