jQuery Plugin To Create Snowfall Animations On Your Web Page - Snowfall

File Size: 634 KB
Views Total: 11927
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin To Create Snowfall Animations On Your Web Page - Snowfall

Snowfall is a jQuery plugin designed for winter or Christmas themed website that helps you add amazing snow falling effects on your web page. The plugin uses either Html elements or a JPG as falling snowflakes. Also comes with a standalone version which you can use it in vanilla Javascript.

Your might also like:

Basic Usage:

1. Load jQuery library and the jQuery snowfall plugin in your web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src='path/to/snowfall.jquery.min.js'></script>

2. Create a container where you wish to implement the snow falling effects.

<body class="demo">

3. Initialize the plugin to enable the snowfall animation.

document.body.className  = "demo";

4. Available options.

flakeCount : 35,
flakeColor : '#ffffff',
flakeIndex: 999999,
minSize : 1,
maxSize : 2,
minSpeed : 1,
maxSpeed : 5,
round : false, // makes the snowflakes rounded if the browser supports it.
shadow : false, // gives the snowflakes a shadow if the browser supports it.
image : "images/flake.png"

Change logs:


  • update hardcoded color values to use flakeColor variable that is it


  • Fixed issue that caused flakes speed to double based on the amount of times `snowfall` was called on the page. Also removed ID checks in the jQuery script clear function


  • removed flake id's altogether since they weren't really used at all and just added extra noise to the flake markup. Since every flake has a class and is tied to a parent element we can just reference them using that information.


  • fix scrollbar (vertical)


This awesome jQuery plugin is developed by loktar00. For more Advanced Usages, please check the demo page or visit the official website.