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

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

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">
</dody>

3. Initialize the plugin to enable the snowfall animation.

document.body.className  = "demo";
$(document).snowfall(OPTIONS);

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:

2016-02-28

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

2014-12-07

  • 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

2014-12-06

  • 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.

2014-11-28

  • fix scrollbar (vertical)

2014-11-20


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