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.

  • Google Buzz ER: Google Buzz for Wordpress (137)
    Yesterday Google announced new service, Google Buzz, a new way to share updates, photos, videos and more, and start conversations about the things you find interesting. Today you can have […]
  • 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 […]
  • jqIsoText: jQuery Text Effect Plugin (107)
    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 […]
  • 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 […]
  • HTML5/CSS3 Circle Music Player (3)
    More then a year ago my very talented designer friend Jovan Stanojevic presented me idea of Circle Music player which will play local .mp3 files. This is his original idea, but after we […]

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 jQuery Snow Falling effect Plugin - DESIGNTOOLEXPERTDESIGNTOOLEXPERT Cancel reply

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