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.

  • mooBarGraph: AJAX graph for MooTools (18)
    mooBarGraph is AJAX graph plugin for MooTools which support two types of graphs, simple bar and stacked bar graph. This plugin made graph from your JSON data and is compatible with all […]
  • jqBarGraph – jQuery graph plugin (157)
    jqBarGraph is jQuery plugin that gives you freedom to easily display your data as graphs. There are three types of graphs: simple, multi and stacked. All you have to do is to pass your […]
  • 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 […]
  • 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 […]

114 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

I had the same bug on some devices, it was because of wordpress replacing it with its emojis.
You can disable the emojis by inserting this code in your themes functions.php.

Functions.php:
remove_action(‘wp_head’, ‘print_emoji_detection_script’, 7);
remove_action(‘wp_print_styles’, ‘print_emoji_styles’);

That solved it for me.

Omar on November 29, 2016 at 2:30 pm

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 to Dusan Cancel reply

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