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.

See Also:

• 10 Best Falling Snow Effects Using JavaScript & CSS

How to use it:

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.

$(document).ready(function () {
  $("body").flurry();
});

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

$('body').flurry({

  // snowflake symbol
  // can be an array of characters
  character: "❄",

  // color of snowflakes
  color: "white",

  // how frequently new flakes are generated in ms
  frequency: 100,

  // animation speed
  speed: 3000,

  // min/max size in px
  small: 8,
  large: 28,

  // how far to the left each flake will drift in pixels
  wind: 40,

  // how much each flake will drift in pixels
  windVariance: 20,

  // rotate snowflakes in degrees
  rotation: 90,

  // how much each flake's rotation will be randomized by in degrees
  rotationVariance: 180,

  // start/end opacity
  startOpacity: 0,
  endOpacity: 1,

  // easing function
  opacityEasing: "cubic-bezier(1,.3,.6,.74)",

  // apply a blur effect to snowflakes
  blur: false,

  // CSS overflow property
  overflow: "hidden",

  // CSS z-index property
  zIndex: 9999,

});

4. Callback functions.

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

Changelog:

2023-12-20

• Add onFlake setting, use array for character setting, prettier

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.