Fullscreen Snow Falling Effect With jQuery – Happy Christmas

0 395

In this post I am going to share cool jquery plugin (jQuery Snow Plugin) to add Fullscreen Snow Falling Effect With jQuery to wish Happy Christmas to your visitor on 25th of December. jQuery Snow Plugin is 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.

Integrate snow falling effect on your website

Libraries

Include latest jquery core lib with jquery.snow.js

<!--JS-->
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.snow.js"></script>

HTML

You can simply markup your html page with awesome messages or images.

<h1><b>Merry Christmas!</b></h1>

JS

Finally apply plugins snow falling effect to the whole page 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'
    }
  ]
 
});

 

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, 
 
  // 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'
    },
  ]
});

See live demo and download source code.

DEMO | DOWNLOAD

See official github repository for more information and follow for future updates. Don’t forget to read license for using above plugin in your commercial project.

Leave A Reply

Your email address will not be published.