Fullscreen Snow Falling Effect With jQuery - Snowfall

Fullscreen Snow Falling Effect With jQuery - Snowfall
File Size: 4.44 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Yet another jQuery snowfall plugin which makes custom snowflakes falling from the top and auto fades out when they're about to reach the bottom of the screen.

How to use it:

1. In this case, we're going to use Font Awesome for the snowflakes.

<link rel="stylesheet" href="/path/to/font-awesome.min.css">

2. Place both jQuery library and the main JavaScript file jquery.snowfall.js at the bottom of the webpage.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.snowfall.js"></script>

3. Apply the snow falling effect to the whole webpage.

$.snowfall.start({
  content: '<i class="fa fa-snowflake-o"></i>'
});

4. Customize the snowflakes.

$.snowfall.start({
  size: {
      min: 10,
      max: 20
  },
  color: '#fff',
  content: '&#10052;'
});

5. Customize the snow falling effect.

$.snowfall.start({
  interval: 500,
  disappear: 'linear'
});

6. Stop the snow falling effect.

$.snowfall.stop();

Change log:

2016-11-29

  • Improve stop function

This awesome jQuery plugin is developed by h4wldev. For more Advanced Usages, please check the demo page or visit the official website.