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