Posted on December 19, 2012 by
Spread the word...

I am not a big fan of winter, but things I do enjoy about it are Christmassy and snowy landscapes.
So I think it’s a good idea to share these positive emotions with your website visitors. And that’s what my jQuery “Snowing” effect plugin is guaranteed to do.

Setting up the plugin is really simple. Firstly you have to download the plugin file, see download links at the bottom of this post,  and include it into your site source code:

<script type="text/javascript" src="http://yourdomain.com/jquery.snow.js"></script>

You will need the jQuery library as well, but I assume you’ve already got this.
Secondly attach “Snowing” effect to the chosen elements on your site. Below you can find an easy peace of code that makes the whole page “snowy” (The effect is attached to the body tag):

$(document).ready(function($) {
$('body').snowing();
});

You can adjust the effect to meet your needs by passing an options object to the snowing() method:

$(document).ready(function($) {
$('body').snowing(options);
});

//possible parameters and their default values:
var options = {
minSize : 10, //minimum size of single flake
maxSize : 30, //maximum size of single flake
minOpacity : 0.3, //minimum opacity of single flake (0-1 values range)
maxOpacity : 1, //maximum opacity of single flake (0-1 values range)
intensity : 5, //intensity of snowing (higher -> more intense)
meltingTime : 5, //time after which flakes disappear (higher -> later)
flakeColors : ["#FFFFFF", "#EEEEEE", "#DDDDDD"], //array of possible colors that flakes randomly take
flakeChars : ['&#10052;', '&#10053;', '&#10054;'] //array of possible unicode characters codes that flakes randomly take
};

Click here to see demo (it attaches the “Snowing” effect to the picture below)


//Demo code:
$('#demoImg').snowing(
{
minSize: 5,
maxSize: 10,
intensity: 10,
meltingTime: 10
}
);

Do you like it? If so, then download the plugin file and let it snow on your website (pick the compressed version if you don’t plan to make any changes in the source code):
jquery.snow.min.js (compressed version)
jquery.snow.js

Please be aware that as I haven’t had enough time to improve the performance, it may cause high CPU usage. Anyway  please feel free to ask questions about the plugin or just leave your opinion in the comment box below. Merry Christmas!

Leave a Comment

Your email address will not be made public or shared. Inappropriate and irrelevant comments will be removed.