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.

  • jqIsoText: jQuery Text Effect Plugin (95)
    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 […]
  • Image gallery with fancy transitions effects (1013)
    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 […]
  • Coin Slider: Image Slider with Unique Effects (1603)
    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 […]
  • 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 […]
  • Animated Progress Bar in 4 lines of jQuery (42)
    Progress bars are really useful to indicate to user that something happens and when it will be approximately done. They are useful on page where assets should be preloaded before page is […]

94 comments on "jQuery Snow Falling plugin"

its Amazing…………..nice

Kunal Bhatu Salunkhe on December 19, 2012 at 12:10 am

Script has a problem with processor load in IE

tested on December 18, 2012 at 5:39 pm

Oskar – dotn forget the full stop before the class name…

.appendTo(’.background’)

also ensure that your .background class is set to ‘position:relative’

Great plugin!

Cooshtee on December 18, 2012 at 7:56 am

Hi,

I tried to paste the plugin into my website, but I must be doing something wrong. I use dreamweaver for my website.

Can somebody tell me what to do and how to incorporate the snowflake plugin into my site. You can look at the source of my index page to see how I have got it done now.

Feel free to paste the necessary lines and correct the plugin, so I can copy/paste your message into my dreamweaver source coding and upload.

Thanks for the help!

Regards,

Hans

Hans on December 17, 2012 at 11:03 am

The best snow effect! Thanks

Bik on December 14, 2012 at 6:45 am

@annieb how could I do that? I tried to change the element the snow function is appended to from body to another div, so I tried like this: .appendTo(‘background’) // because “background” is the class name of my div but nothing happens //

Hope you could help me, I´m kinda newbie :) thanks!

Oskar on December 12, 2012 at 11:07 am

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

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>