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.

  • Image gallery with fancy transitions effects (1034)
    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 […]
  • 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 […]
  • JUST – JavaScript Useful Stuff (5)
    I like experiment with data visualization on client side. For that purpose, of course, I need some data for development phase. Since that development phase means that something constantly […]
  • 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 […]
  • 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 […]

114 comments on "jQuery Snow Falling plugin"

thank you all for positive comments.

for minified version of plugin there is updated version with fix for this issue https://github.com/kopipejst/jqSnow/issues/1

Lazarevic Ivan on December 7, 2012 at 5:50 pm

@Laurie – in the jquery file, change the element the snow function is appended to from body to whatever div you would like. Removing or hiding this div from the DOM will also neatly force the snow to stop falling.

annieb on December 4, 2012 at 3:09 pm

i using jsnow plugin. my problem is when i load flash with this plugin, the flash get slowed. How can i stop this plugin and restart my flash stuff is over

felix on November 27, 2012 at 2:25 am

Great plugin!! Is it possible to only have the snow fall inside of a div? Thanks

Laurie on November 26, 2012 at 4:04 pm

my snow is falling continuously in firefox and ie, but in safari and chrome it is falling to a point and disappearing , can anyone help me with this prob????

Skii on November 21, 2012 at 8:55 am

downloaded ! ~~ nice plugin

trần công nghiệp on November 19, 2012 at 5:43 am

This is a great script. Thanks for sharing – we are using on our new website.

In response to Daniel’s suggestion of using overflow:hidden on the body tag, I would suggest changing the element that has the snow appended to (body by default) to your main website container and then just amending the ‘endPositionTop’ to stop the snow falling below the height of the website.

Hope that makes sense for anyone that needs it and thanks Ivan for this fantastic script 🙂

Your Christmas Countdown on November 18, 2012 at 5:35 am

Nice one. Use of .animate() was smart.
Check out my similar plugin:
http://www.ytconvert.com/sul4bh/jquery.snowfall/

sul4bh on November 1, 2012 at 2:24 am

Woh .. Good thiniking ..

Divya on October 25, 2012 at 12:31 am

free downlads site

sihab himu on October 22, 2012 at 11:14 am

body {
overflow: hidden;
}

gets rid of scrollbars

Daniel on October 12, 2012 at 10:45 am

Love it! Thank you!

Dan on September 25, 2012 at 6:40 am

Hey, gr8 plugin and thx for sharing it, am writing from Colombia, and i wonder if theres any way i can stop the snow falling from a button or a call via js. thx for the answer.

Windsor on August 14, 2012 at 9:48 am

Perfect!!

I-Design on June 13, 2012 at 4:40 am

Very cool features for Jquery. I’ll keep this so that when it is time for Christmas I’ll use it. Thanks once again.

Eyewebmaster on April 24, 2012 at 9:03 pm

wow Nice creation.

invoguesoft.com on March 21, 2012 at 6:36 am

Cool. The most tricking part while tinkering about how would I make this effect was how to produce snowflake itself, but it it turns out to be just a decimal code. haha.. nice

Dusan on February 9, 2012 at 8:33 pm

Wow! Nice stuff! I made some changes to work with a snowflake picture! Awesome!!

Rafael Kuvasney Marcolin on January 31, 2012 at 10:09 am

hi i want to write a post as a guest on your blog.please accept my request.

umair on January 29, 2012 at 12:24 pm

Leave a Reply to Jaysen Freelance web designer London Cancel reply

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