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 (1618)
    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 (1023)
    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"

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 on December 3, 2014 at 10:57 pm

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.

Nathaniel Brown on December 4, 2014 at 3:27 am

Thx!

Pavelk on December 3, 2014 at 8:24 pm

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

Georg on November 30, 2014 at 3:18 pm

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

chinthana on November 11, 2014 at 3:52 am

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!

Solum on October 27, 2014 at 4:55 pm

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!

Ryan Gittings on October 27, 2014 at 12:08 pm

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

Ziggy on September 24, 2014 at 10:39 pm

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

Jacques on September 16, 2014 at 6:20 pm

Hello,

May I know where to change the pattern of snow flake.

Han on December 13, 2013 at 1:54 am

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.

Craig on December 11, 2013 at 4:08 am

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.

Matt on November 11, 2014 at 2:48 pm

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

Roger Stenson on December 7, 2013 at 6:55 am

@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

JCPerez on December 6, 2013 at 11:34 am

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…

Jakub on December 6, 2013 at 5:28 am

ok, figured it out!!!

Atar on December 5, 2013 at 4:20 am

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!

Atar on December 5, 2013 at 4:08 am

Thanks – works very good!

@Chris Harding
put this line in your css:
#flake { z-index:200 }

gabba on December 3, 2013 at 7:27 am

How do you make the snowflakes always appear on top of everything as they are going behind the images on my site?

Chris Harding on December 2, 2013 at 6:49 am

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)

kev on November 27, 2013 at 3:32 am

how can i add this to my wordpress?
thnx

mike on November 27, 2013 at 12:23 am

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

Werner Vanhorenbeeck on November 26, 2013 at 4:45 am

Izgleda da ne radi na win-XP.
Testirano na Chrome.

Slavisa on November 21, 2013 at 8:34 am

Thank you for this very cool (rs) plugin.

Douglas Oliveira on November 19, 2013 at 8:38 am

Its really nice and looking good.

Manikandan on November 16, 2013 at 1:58 am

Great effect, Christmas coming soon 🙂 Simple implementation. Great job!

Tom on October 24, 2013 at 4:43 am

Leave a Reply

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