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

By Focusoncode May 13, 2018

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 effect at 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 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 website. The snow can olso move in the direction of the cursor movement.

Share This

Leave a Comment

Your email address will not be published.