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.
I was playing around with your code and it quite nice but I don’t see a way to restart it or expand the flake area if the screen size changes like if you go from landscape to portrait. Or do you?
I got it to work. I reset the document sizes by adding
$(window).on(‘resize’,function () {
documentWidth = $(document).width();
documentHeight = $(document).height();
});
inside the setInterval function.
Thx!
Hi,
trying to implement snwo on our website I copied the source code for the snow of your above demo page.
As our website’s colour is light blue, I changed the colour of #flake from white to dark blue.
This works fine with latest version of IE, Chrome and Safari – only Firefox does not change the snow-colour!??
Any ideas or hints?
NB: have not yet uploaded the “snowy”-version of our website yet due to the above problem!
Thanks in advance for your help,
Georg
nice and easy configuration…..
are there any option to stop snowing because some users many not be like that?
🙂
I am trying to create this site but I wanted to get a falling snow background onto it. But I have tried everything and even videos on youtube did not help. Do you know how to make the code work? If so please respond very much help needed!
Great plugin!
Was looking for one with Christmas coming up, my gosh doesn’t time fly. Always a nice little feature to add at Christmas time! I’ll be adding it to my web designs very shortly.
Thanks!
Yes is it possible to use on a div? Please help!
Hey,
Great script… Is it possible to add it in one div instead of the entire page? I want it to snow on an image…
Thanks! 🙂
Hello,
May I know where to change the pattern of snow flake.
Have tried to implement this on to my website.
When a flake hits the bottom of the page, it increases the height of the the page so I start getting scrollbars.
Is there a way I can avoid this? Thanks.
In case somebody else reads this….Just adjust the documentHeight value (-20 or greater works) in the js. If you increase the size of the flakes, you’ll have to readjust the doc height if there is overlap.
I regret I have little experience with Java
I have stored your routine as downloaded in a folder called App_code
with the name snow.js. The site works OK till I insert your code
I clearly don’t want to mount this revised master page till it works.
I am trying to deploy the snow effect across my website and have
inserted the script invocation in the Visual Studio master page as follows
Each execution produces the following Compilation Error Message
JS1004: Expected ‘;’
I have tried putting , in all over the place to no effect.
I would be grateful for your comments on my error
Bawburgh Bridge Club Master Page
Bawburgh Bridge Club Master Page
document= C:UsersRogerDropBoxBridgeResultsWebSitesBBCBBCMain.Master;
$(document).ready( function(){,
$.fn.snow();
});
etc for the rest of the page
@Jakub i already used in a wordpress site, just download the file “jquery.snow.min.1.0.js” upload it to ur site via ftp then call it from ur “functions.php” file and then add the lines
$(document).ready( function(){
$.fn.snow();
});
in ur “header.php” file or anywhere in ur blog.
See it working at http://topfloormarketing.net
Hello! Can somebody explain me how to use it in WordPress? I have been trying to do it in many ways and it still dont works…
ok, figured it out!!!
Hi there,
Great plugin, but here’s a question
How can I “let it snow” only in a specific area, over a single image for example?
I need it to work on an area 720px x 576px from the top left corner.
Can anyone help? I’m really not that good with js.
THANKS!
Thanks – works very good!
@Chris Harding
put this line in your css:
#flake { z-index:200 }
How do you make the snowflakes always appear on top of everything as they are going behind the images on my site?
it works nicely, BUT
when you open an image with prettyhphoto.js or other method of displaying images nicely it pushes the image at the bottom of the page
I used it in my wordpress site (but removed it after the pics stop working right)
how can i add this to my wordpress?
thnx
Hi,
Thanks for this nice plugin.
For those who need a functionality to stop the snowfall, I have written a version with a stop function.
$.fn.stop();
http://www.mediaxis.be/downloads/jquery/plugins/jquery.snow.min.1.0.js
Keep up the good work!
Best regards
Izgleda da ne radi na win-XP.
Testirano na Chrome.
Thank you for this very cool (rs) plugin.
Its really nice and looking good.
Great effect, Christmas coming soon 🙂 Simple implementation. Great job!