Add Snow Falling Effect to Your Website

There are few festive times per year that we really wanna engage with. But it may depend on your culture. However if I remind you about December month, you will start to imagine Santa and gifts all around you with a snowy background. That's how our imagination works. You don't wanna be a catholic to find the year end as a festive season. All people get together in this season and celebrate it with their friends and family members. So most of you may decorate and do some colorful changes to your home place. What about your blog or website? Why don't you think about adding some new look or effect to your website in the festive season or when the Winter season knocks your door?

I was thinking what if I can add some festive look to my blog in the X'mas season. And I did see most of webmasters working on that and made their sites more colorful with cool images and effects. I did some research on the web and found some cool stuff which are more creative enough to the holidays. So now I would like to share one of findings with you which is known as jQuery Snawfall plugin.

This will add snow falling effect on your site and there is a positive aspect of this plugin over the other stuff I found online - Shadow on flakes. If you have light color background on your site, there is no point of showing just white snow flakes. But with enabled shadow on flakes, it will strengthen the visibility of snow falling on your page eventhough your site has lighter background. Absolutely there is more options too. So if you wanna add this effect to your site, let go through below steps.

Steps:

1. Search for the following tag within your template / source code.

</head>

2. Now add below jQuery JavaScript Library just before the </head> tag.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

Notes:

* If you are a Blogger user and don't know how to edit your template, read How to Edit Your Blogger Template.

* If you have already implemented jQuery JavaScript Library in your site, you don't wanna add this again.

3. Then, search for the below tag in your template.

</body>

4. Add below code snippet just before the </body> tag.

<script src='https://sites.google.com/site/mayura4ever/snowfall.min.jquery.js' type='text/javascript'/>

<script type='text/javascript'> 
jQuery(document).ready(function()
{
 jQuery(document).snowfall({
  flakeCount : 100,
  flakeColor : '#ffffff',
  minSize : 1,
  maxSize : 5,
  round : true,
  shadow : true
 });
});
</script>

Color Indication Information:

   - Number of Flakes on the Page

   - Color of the Flakes

Here you need to add the hex value of the color you wanna use with flakes

   - Minimum Size of a Flake

   - Maximum Size of a Flake

   - Shape of a Flake

If you wanna show flakes in round shape, set value true here. Else set it to false to show flakes in square/pixel shape.

   - Enable/Disable Shadow

Set value as true if you wanna add shadow for flakes (Recommended for light background color websites). Else set it to false.

5. Save your template.


More Information:

If you wanna stop the snow falling effect for a while without deleting above code snippet, just add below line right before the </script> tag in 4th step.

$(document).snowfall('clear');

Credits: This jQuery Snowfall plugin is a creation of Jason Brown and the credit goes to him.

Enjoy :-)