jQuery Plugin For Random Snow Falling Effect - fallingsnow.js

fallingsnow.js is a lightweight and performant jQuery plugin which generates random falling snowflakes with a parallax effect. Great for your next Christmas and Winter designs.

How it works:

• Make a random number of flakes depending on the width of the screen.
• Generate a random number of snowflakes each with a random position, width and height, and three types of opacity
• We make the falling speed depending on the size of the snowflake - the smallest being the slowest, thus creating a nice parallax effect
• Animate each individual snowflake

Basic usage:

1. Put the jQuery fallingsnow.js plugin's CSS file in the header of the html page.

<link rel="stylesheet" href="jquery.fallingsnow.css">

2. Put the jQuery fallingsnow.js plugin's script file after jQuery library but before you close the body tag.

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

3. Call the plugin on the target container where you want to generate the snow falling effect.

$( "#snow" ).fallingSnow();

4. Possible plugin options to customize the snow falling effect.

$( "#snow" ).fallingSnow({
  // do we want to be able to stop the snow falling?
  stopOnClick : true,

  // on this we click to stop the snow animation
  stopElement: $('#snow'),

  // tweak the general speed of the falling snow. 
  // 0.1 is faster, e.g. 5 is slower. Decimals are allowed
  // but do not use 0 (zero)
  speedAdjust: 2,

  // tweak the general size of the snowflakes. 
  // 0.1 is smaller, e.g. 2 is larger. Decimals are allowed
  thicknessAdjust: 1,

  // set the deviation from the initial point of falling 
  // this makes the snowflake start at a random new point
  // but also causes some drift when falling
  drift: 100,

  // set different opacities. If true then three different
  // opacities are created for the snowflakes: 1, 0.8 and 0.7
  opacity: true,
});

---

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