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.
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.
Comments [ 46 Comments ]
» Trackbacks and pingbacks click to expand
-
[...] Tutorial Demo Download [...]
-
[...] Source Demo [...]
-
[...] Source Demo [...]
-
[...] Source Demo [...]
-
[...] 4. jQuery Snow Falling Plugin [...]
-
[...] 눈내리는 효과 내는 플러그인 [...]
-
[...] (we should be able to make the wider!), I created a quick, wintry scene to act as a backdrop. This jQuery snowfall plugin seemed to perform the best. Note that if you’re running snowfall on a Mac, it renders much [...]
-
[...] Tutorial | Demo [...]
-
[...] 1. jQuery Snow Falling Plugin [...]
-
[...] can download jquery.snow.js file from WORKSHOP owned by Ivan Lazarevic (the author of snowing script code), then upload this file somewhere on internet and use it for [...]
Leave a Reply
More Articles
-
Bigshark – larger buttons on Grooveshark
GrooveShark is one of the web services which I’m using on daily basis. Actually, I have one computer which I use only to play music from my GrooveShark playlists, while I’m sitting on couch. But problem is when I want to skip or pause some song. I have to get up because I can’t hit [...]
-
jqBarGraph – jQuery graph plugin
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 data to this plugin. This plugin is compatible and fully tested with Safari 2+, Internet Explorer 6+, Firefox 2+, Google Chrome [...]
-
Google Buzz ER: Google Buzz for Wordpress
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 Google Buzz posts on your WordPress site.
Google Buzz Er is Wordpress plugin for showing public Google Buzz posts for selected Google account. All you have [...]
-
JUST – JavaScript Useful Stuff
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 change, I had to find a way to make my life easier. That’s why I wrote a group of JavaScript range functions which helps me to [...]
January 29, 2012
hi i want to write a post as a guest on your blog.please accept my request.
January 31, 2012
Wow! Nice stuff! I made some changes to work with a snowflake picture! Awesome!!
February 9, 2012
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
March 21, 2012
wow Nice creation.
April 24, 2012
Very cool features for Jquery. I’ll keep this so that when it is time for Christmas I’ll use it. Thanks once again.
June 13, 2012
Perfect!!
August 14, 2012
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.
September 25, 2012
Love it! Thank you!
October 12, 2012
body {
overflow: hidden;
}
gets rid of scrollbars
October 22, 2012
free downlads site
October 25, 2012
Woh .. Good thiniking ..
November 1, 2012
Nice one. Use of .animate() was smart.
Check out my similar plugin:
http://www.ytconvert.com/sul4bh/jquery.snowfall/
November 18, 2012
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
November 19, 2012
downloaded ! ~~ nice plugin
November 21, 2012
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????
November 26, 2012
Great plugin!! Is it possible to only have the snow fall inside of a div? Thanks
November 27, 2012
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
December 4, 2012
@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.
December 7, 2012
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
December 12, 2012
@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!