jQuery Snowing background 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.

This is the best website styling during Christmas and easy to customs the speed and icons.

Github here

Step1:
link font-awesome.css  ,jquery library and jquery-snow.js

in head

in body

step2:
HTML
Make it happend at body or any tag which can fetch using target attribute at javascript.

step3:
css

css

If make this happends in the body,you should size the html and body.

step4:
js
After the DOM is loaded, it's time to affect the plugin.

 <script type="text/javascript">  
   var snowEffectInterval = jQuery.fn.snow({  
     // min size of element (default: 20)  
     minSize: 30,  
     // max size of element (default: 50)  
     maxSize: 60,  
     // flake fall time multiplier (default: 20)  
     fallTimeMultiplier: 20,  
     // flake fall time difference (default: 10000)  
     fallTimeDifference: 10000,  
     // interval (miliseconds) between new element spawns (default: 500)  
     spawnInterval: 1000,  
     // 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'  
       },  
       {  
       //element #6  
         // html element to be spawned for this element  
         html: '<i class="fa fa-heart" aria-hidden="true"></i>',  
         // hex color for this element - works only for font based icons  
         color: '#f8d'  
       },  
     ]  
   });  
   </script>  

• minSize：min size of elements.default：10。
• maxSize：max size of elements.default：20。
• fallTimeMultiplier：the multiplier of falling elements.default：20。
• fallTimeDifference：the difference of falling elements,default：10000。
• spawnInterval：the gap of new elements generation.default：500mm。
• target：the target position for generating elements.default：body。
• elements：html elements.