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
-
Create image gallery in 4 lines of jQuery
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 should have bar with description. When user click on thumb large image and description should change.
My idea was to use alt tag of [...]
-
Fancy Transitions Featured Gallery for WordPress
ftFeatured is Wordpress plugin for creating image gallery with fancy transition effects of featured posts. You can choose between three types of transition effects: curtain, wave and zipper. Also, you can set width, height, delay time, number of posts etc.
This WordPress plugin is based on jQuery jqFancyTransitions plugin and is very easy to use. After [...] -
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 [...]
-
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 [...]
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?