Customizable Snow Falling Effect With jQuery And CSS3 - Flurry

Customizable Snow Falling Effect With jQuery And CSS3 - Flurry
File Size: 18 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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

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.