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
-
Animated Progress Bar in 4 lines of jQuery
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 shown to user. That’s why is important that progress bar code is light weight so it can be loaded really fast at the [...]
-
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 [...]
-
HTML5/CSS3 Circle Music Player
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 start to work on this a few things were changed.
[He have more great designs which you'll see if you go to his [...] -
News Ticker in 4 lines of jQuery
There are a lot of different jQuery News Ticker plugins with lot of options that you can use. Do you want to learn how to create one on your own in only 4 lines od jQuery code ?
Idea is pretty simple, take first element from list, apply some disappearing effect on it and on [...]
December 14, 2012
The best snow effect! Thanks
December 17, 2012
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
December 18, 2012
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!
December 18, 2012
Script has a problem with processor load in IE
December 19, 2012
its Amazing…………..nice
December 21, 2012
I can’t set color of snow flake that is “black”
any suggestion
thanks
December 21, 2012
Thank you so very much! It is beautiful!
December 21, 2012
Thanks a lot! Extremely easy to use and customize, great work!
I wrote a post on my blog (in Spanish) to show this fantastic plugin, I hope you’re not disagree with that.
Thanks!
December 23, 2012
Same problem as roybatty, my snow is black, looks like kinda industrial Christmas
)
December 24, 2012
Great job. It’s beautiful!
Thanks !!!
December 25, 2012
always use scroll bar and does not disappear!! when hit the bottom of page animate the scroll bar..
December 25, 2012
Latest version fix ‘black snow’ issue https://github.com/kopipejst/jqSnow/downloads
@Webnovant
Thanks for support!
January 9, 2013
@Hans,
in case anyone else runs into the same trouble as you and I was having.
Firstly if you have a service like ‘ClouldFlare’ make sure you disable it temporarily.
Second make sure you place the the following code in the header:
Make sure your ‘jquery.snow.js mataches what you have on your site because there are newer, differently named versions.
Thirdly make sure you place the script:
$(document).ready( function(){
$.fn.snow();
});
within your tags, this is very important!
then you should be all set
Thanks for making this!
-Josh
January 9, 2013
oops it doesn’t like coding, makes sense.
just make sure to put the first two lines of code they have above in the same order.
April 13, 2013
hi..
very nice post..but snow image is not visible in asp.net
anyone can post the solution for this problem?
May 16, 2013
can we change the flake to a custom png image i have?