Customizable Snow Falling Effect With jQuery And CSS3 - Flurry

File Size: 19.4 KB
Views Total: 14821
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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:

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.