🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

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.

snow

Documentation

jQuery Snow Plugin

A simple jQuery snow plugin with customizable options and elements. Works with pure HTML elements. Can be used with FontAwesome or any other icon font as well as images.

Usage (example uses fontAwesome):

In order to compensate for not having a ratio mechanism built-in you can just add a proportionate number of copies to the elements array, see below:

var snowEffectInterval = jQuery.fn.snow({   // min size of element (default: 20)   minSize: 10,      // max size of element (default: 50)   maxSize: 20,      // flake fall time multiplier (default: 20)   fallTimeMultiplier: 20,       // flake fall time difference (default: 10000)   fallTimeDifference: 10000,       // Fall top-left to bottom-right (default: 270)   direction: 225,      // interval (miliseconds) between new element spawns (default: 500)   spawnInterval: 100,       // jQuery element to apply snow effect on (should work on any block element) (default: body)   target: jQuery("body"),      //elements to use in generating snow effect   elements	: [        // Element #1     {        // html element to be spawned for this element       html: '<i class="fa fa-snowflake-o" aria-hidden="true"></i>',       // hex color for this element - works only for font based icons       color: '#ffffff'     },          // Element #2     {        // html element to be spawned for this element       html: '<i class="fa fa-bell-o" aria-hidden="true"></i>',       // hex color for this element - works only for font based icons       color: '#ed9b40'     },          // Element #3     {        // html element to be spawned for this element       html: '<i class="fa fa-snowflake-o" aria-hidden="true"></i>',       // hex color for this element - works only for font based icons       color: '#ffffff'     },          // Element #4     {       // html element to be spawned for this element       html: '<i class="fa fa-music" aria-hidden="true"></i>',       // hex color for this element - works only for font based icons       color: '#cc2037'     },          // Element #5     {        // html element to be spawned for this element       html: '<i class="fa fa-snowflake-o" aria-hidden="true"></i>',       // hex color for this element - works only for font based icons       color: '#ffffff'     },   ] }); 

Additional info

Tested on jQuery 2.7 and 3.1.


You May Also Like