How to Add Awesome Snowfall Effect to Your Website

Are you looking to decorate your website with snowfall effect this winter? Well, here is a small tutorial on how to add snowfall effect to your website and chill it up.  In this tutor, we are going to use Snow Flurry jquery plugin developed by html5andblog to add the snowfall effect. Well, let’s get started-

Also read:

• 6 Most Useful Resources for Web Developers to Get Free HTML CSS Snippets
• How to Animate Font Awesome Icons to Grab Visitors Attention

Steps to Add Snowfall Effect to your Website

1. Include the snow flurry and jquery script along with jQuery in the document header
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/130527/h5ab-snow-flurry.js"></script>
2. Add the following jQuery code in the footer of your HTML document right before the closing body tag
   <script>
jQuery(document).ready(function($){
$(document).snowFlurry({
maxSize: 5,
numberOfFlakes: 50,
minSpeed: 10,
maxSpeed: 15,
color: '#fff',
timeout: 0
});
});
</script>
3. Add the following CSS just before the closing head tag (or you can also add this CSS in your stylesheet without using the style tag)
   <style>
.sf-snow-flake {
position: fixed;
top: -20px;
z-index: 99999;
}
.sf-snow-anim {
top: 110%;
}
</style>

That’s it, save your HTML document and check out how awesome the snowfall effect looks. You can add more snowflakes by changing numberOfFlakes value in the jquery code, you can also control the speed of snowfall by modifying minSpeed and maxSpeed values. Click on the button below to download the snowfall HTML file with complete code.

How to Add Snowfall Effect to WordPress Website?

Would you like to add snowfall effect to your WordPress website? Well, there is a tiny plugin available called Snow Flurry developed by HTML5andBeyond. Here is the link for Snow Flurry plugin.

• CSS
• HTML
• jQuery Plugin