Fullscreen Snow Falling Effect With jQuery - Snowfall

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

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.