jQuery Plugin For Snowfall Effect with Rotating Snowflakes

File Size: 3.53 KB
Views Total: 7405
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Snowfall Effect with Rotating Snowflakes

A pure JavaScript plugin for jQuery that allows you to implement holiday snowfall effect with rotating snowflakes on your web page.

Your might also like:

How to use it:

1. Load the latest version of jQuery library and the jquery.snow.js script in your web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="jquery.snow.js"></script>

2. Create the plugin on where you want to implement the snow falling effect.

jQuery("#CONTAINER").snow();

3. Rotate the snowflakes using CSS3 animations.

.snowflake {
  -webkit-animation: spin 4s linear infinite;
  -moz-animation: spin 4s linear infinite;
  animation: spin 4s linear infinite;
}

@-moz-keyframes 
spin { 100% {
  -moz-transform: rotate(360deg);
}
}

@-webkit-keyframes 
spin { 100% {
  -webkit-transform: rotate(360deg);
}
}

@keyframes 
spin { 100% {
  -webkit-transform: rotate(360deg);
  transform:rotate(360deg);
}
}

4. Customize the snow falling effect during initialization.

jQuery("#CONTAINER").snow({

// default options
intensity: 10,
sizeRange: [10, 20],
opacityRange: [0.5, 1],
driftRange: [-2, 2],
speedRange: [25, 80]

});

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