Customizable Snow Falling Effect With jQuery And CSS3 - Flurry

Yet another jQuery plugin used for displaying a highly customizable, CSS3 animated snow falling effect with rotating snowflakes on the webpage.

Features:

• Fully configurable UTF-8 snowflakes.
• Smooth animations based on CSS transforms, transitions and requestAnimationFrame. 
• Cross-browser.
• Wind simulation.
• Snowflake rotation options.
• Auto fades out when the snowflakes reach the bottom of the container.

Basic usage:

1. Load the jquery.flurry.js script after jQuery library and the Flurry plugin is ready for use.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.flurry.js"></script>

2. Call the function flurry() on a container where you want to apply the snow falling effect.

$('body').flurry();

3. Customize the snow falling effect with the following options.

$('body').flurry({
  character: "❄",
  color: "white",
  frequency: 100,
  speed: 3000,
  small: 8,
  large: 28,
  wind: 40,
  windVariance: 20,
  rotation: 90,
  rotationVariance: 180,
  startOpacity: 1,
  endOpacity: 0,
  opacityEasing: "cubic-bezier(1,.3,.6,.74)",
  blur: true,
  overflow: "hidden",
  zIndex: 9999
});

4. Callback functions.

$('body').flurry({
  onInit: function() {},
  onDestroy: function() {},
});

Change log:

2017-02-06

• update

2016-12-07

• Fix blurred flake color so it uses color option

---

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