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.
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.
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
@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.
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
Great plugin!! Is it possible to only have the snow fall inside of a div? Thanks
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????
downloaded ! ~~ nice plugin
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 🙂
Nice one. Use of .animate() was smart.
Check out my similar plugin:
http://www.ytconvert.com/sul4bh/jquery.snowfall/
Woh .. Good thiniking ..
free downlads site
body {
overflow: hidden;
}
gets rid of scrollbars
Love it! Thank you!
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.
Perfect!!
Very cool features for Jquery. I’ll keep this so that when it is time for Christmas I’ll use it. Thanks once again.
wow Nice creation.
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
Wow! Nice stuff! I made some changes to work with a snowflake picture! Awesome!!
hi i want to write a post as a guest on your blog.please accept my request.