Merry Christmas Snow Falling Effect With jQuery - snow.js

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.