Merry Christmas Snow Falling Effect With jQuery - snow.js
File Size: | 17.4 KB |
---|---|
Views Total: | 18006 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Yet another Merry Christmas snow falling effect implemented in jQuery that is fully configurable and allows you to use any icons/characters for the snowflakes.
How to use it:
1. Insert the latest version of jQuery and the jquery.snow.js
script into the document.
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" crossorigin="anonymous"> </script> <script src="jquery.snow.js"></script>
2. Apply the snow falling effect to the whole body.
jQuery.fn.snow({ // also works on any block element target: jQuery("body"), // uses font awesome iconic font elements : [ { html: '<i class="fa fa-snowflake-o" aria-hidden="true"></i>', color: '#ffffff' } ] });
3. Add snowflake images as many as you wish.
jQuery.fn.snow({ // also works on any block element target: jQuery("body"), // uses font awesome iconic font elements : [ // Icon #1 { html: '<i class="fa fa-snowflake-o" aria-hidden="true"></i>', color: '#ffffff' }, // Icon #2 { html: '<i class="fa fa-bell-o" aria-hidden="true"></i>', color: '#ed9b40' }, // Icon #3 { html: '<i class="fa fa-snowflake-o" aria-hidden="true"></i>', color: '#ffffff' }, // Icon #4 { html: '<i class="fa fa-music" aria-hidden="true"></i>', color: '#cc2037' }, // Icon #5 { html: '<i class="fa fa-snowflake-o" aria-hidden="true"></i>', color: '#ffffff' }, ] });
3. Set the min/max size of the snowflakes.
jQuery.fn.snow({ minSize: 20, maxSize: 50, });
4. Customize the snow falling effect.
jQuery.fn.snow({ // flake fall time multiplier fallTimeMultiplier: 20, // flake fall time difference fallTimeDifference: 10000, // interval (miliseconds) between new element spawns spawnInterval: 500, });
Changelog:
2018-06-08
- Removed console logging.
This awesome jQuery plugin is developed by herctech. For more Advanced Usages, please check the demo page or visit the official website.