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.
Hi there, I am using this plugin on my site and it looks amazing. I am having one issue, and that is the flakeColor feature isn’t working. All I am seeing in the html is a call to an svg.
https://s.w.org/images/core/emoji/2/svg/2744.svg
The color does not change. Any thoughts?
I had the same bug on some devices, it was because of wordpress replacing it with its emojis.
You can disable the emojis by inserting this code in your themes functions.php.
Functions.php:
remove_action(‘wp_head’, ‘print_emoji_detection_script’, 7);
remove_action(‘wp_print_styles’, ‘print_emoji_styles’);
That solved it for me.
One of the best snow effects jquery plugin.
If someone has a rendering bug in chrome try this
Awesome..
Hello,
The script is really good.
The only thing i found missing is the ability to append the snow on a specific element like a fixed div that would be in frond of all other in screen 😉
That is easily done of course by changing the append element in the script itself but it could be handy to become an actual option.
Good Job, Thanks.
Great tut, thanks!
Nice tutorial!
good job your tutorial great work
Simply Genial
Both scripts loaded but got an error:
Cannot read property ‘snow’ of undefined;
But can we have hearts
If someone has a rendering bug in chrome try this:
#flake {
border: 1px solid transparent;
}
this works great.. am wondering how to make the snow “accumulate” at the bottom of the page? Just an added feature that would be neat. 🙂
Hi,
I’m trying to install it, but I don’t know why it’s not working.
I put theses lines into my head:
Then this inside my body:
$(document).ready( function(){
$.fn.snow({minSize: 10,maxSize: 20,newOn: 1250,flakeColor: ‘#FFFFFF’ });
});
So Can you help me please. Thank you.
Nice little script. One thing I’ve changed to make it easier and more flexible to use:
Remove the “id” attribute. Having all the flakes take the same ID is not valid HTML. I replaced it with a class.
The class can then be used to add other attributes. One I have found works with a lot of themes is to set the z-index to -10. This shows the flakes in the background of a theme, over the body tag, but hides behind any central content wrapper on your page. The snow flakes then don’t fall over your content, which may not be desirable.
The animate does eat a fair chunk of CPU though. I’m not sure if there is some way to decrease the load that the animate imposes on the browser.
How do I put it into my blog?
Awesome! working on my blog http://androiddelta.com
Although, a minute glitch is present. When mouse hovered on the falling snow cursor changes. Rest all is stunning.
Hi,
I try your plug’in.
It is very great but in some device with Firefox or Chrome flakes are light blue.
Do you know why ?
This is amazing!
Hi. This is great in all browsers, except for older versions of IE. Has anyone else had this problem or knows how to fix it please?
Thanks 🙂
How to disable this function for mobile or tablet devise.