SBP Blog

How to add snow (&joy) to your website

Dec 21, 2015 by CatalinI


With the Christmas season fast approaching, I bet that you're over your head with shopping, cooking and maybe planning a great celebration, with your family and friends... and while you gather all your decorations, in order to bring festive cheer into your home, what about your own website / blog? It's not too late to consider a "cool" decoration for it, right?

So put those oven mitts aside and put your programming gloves on - in the following lines I will try to show you how to bring some snow (&joy) into your website :)

1. Don't bother with searching, as I've done this for you. So first things first - go to this address and download the zip file "Snowstorm v1.44.20131208"

(this guy did a swell job with the scripts!)

2. For the webpage in which you want to add the snow effect, add the following line inside the {code}{/code} tag:

<script type="text/javascript" src="snowstorm_plugin\snowstorm.js"></script>

3. Also, don't forget to change your src attribute to where your folder will be. My folder was right beside the page :)

But we're not done yet! You can still customize the snow flakes, you can change the wind direction, the speed for the flakes, stop the buildup at the bottom of the page, and a lot more.

What might be unintuitive is that the flakes are represented by a UNICODE character. The default one is the 'bullet'. This can be changed by modifying the underlying parameter. However, you can also change it to an image by setting the 'snowCharacter' parameter to a tag. Just copy and paste the following snippet under your plugin and the image will change.


<script type="text/javascript">
snowStorm.snowCharacter = '<img src="your_image.gif">'; //changes the flake to be the one inside your img file
snowStorm.flakeWidth = widthOfImage; // specify the width of the image
snowStorm.flakeHeight = heightOfImage; // specify the height of the image

4. Open the 'snowstorm.js' file, found inside the plugin folder, and all the customization options that you need are found between lines 18 - 46. Modifying this plugin (as you see fit) should be a piece of cake (or a Christmas pudding!): just follow the steps presented above, and leave us a comment in case you have questions.

I wish you a Merry Christmas and a successful (no bugs at all) New Year!

Tags: How To  JavaScript 


No comments yet.

Your Comment: