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.
Is it possible to constrain the snowflakes inside a div?
jQuery Simple Snows from: http://snows.nhatanh.net/
You can edit the option, live preview on your website and then get the embeded code very easy!
Demo: http://snows.nhatanh.net/demo.html
Simply Super! Nice!
Thanks!
I’m curious about Sami’s ^ question as well. Any ideas for a custom png?
can we change the flake to a custom png image i have?
hi..
very nice post..but snow image is not visible in asp.net
anyone can post the solution for this problem?
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.
@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
Latest version fix ‘black snow’ issue https://github.com/kopipejst/jqSnow/downloads
@Webnovant
Thanks for support!
always use scroll bar and does not disappear!! when hit the bottom of page animate the scroll bar..
Great job. It’s beautiful!
Thanks !!!
Same problem as roybatty, my snow is black, looks like kinda industrial Christmas :))
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!
Thank you so very much! It is beautiful!
I can’t set color of snow flake that is “black”
any suggestion
thanks
Hi Roybatty!,
It seems there is a typo on the function, replece the parameter for this (flakeColors) or just add an “s” to the end.
regards.
its Amazing…………..nice
Script has a problem with processor load in IE
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!
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
The best snow effect! Thanks
@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!