How to Create Snowfall Effect in Your Website with jQuery and CSS

In this article, we will create a snowfall effect in your website. For this tutorial, we will use a jquery plugin called Snowstorm.
The plugin is very lightweight and will not affect your website SEO and PageRank at all.

Check the demo link and the download link for source.

Download   Demo

How to implement it?

1) Download the source given in the download link above.
2) Copy snowstorm.js in your server.
3) Include snowstorm.js in the header of your HTML file
4) Include the stylesheet below in header of your file or in your external CSS file:

#canvas {border: 1px solid black;position: absolute;z-index: 10000;}
#flake {color: #fff;position: absolute;font-size: 25px;top: -50px;}
#page {position: relative;}

That’s all. Now you can see in your website snow falling at the bottom of the website. The snow can also move in the direction of the cursor movement.

Leave a reply