Nice Snow Falling Effect with jQuery and Canvas - Nice Snowing

File Size: 283 KB
Views Total: 7938
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Nice Snow Falling Effect with jQuery and Canvas - Nice Snowing

Just another jQuery plugin that applies a 3D realistic snow falling effect to your website by using Html5 canvas elements and a snowflake PNG.

How to use it:

1. Load the latest version of jQuery JavaScript framework and the snow falling plugin in the web page.

<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/snow-plugin.js"></script>

2. Create several canvas elements for the snow falling effect.

<canvas class="snow-canvas" speed="1" interaction="false" size="2" count="80" opacity="0.00001" start-color="rgba(253,252,251,1)" end-color="rgba(251,252,253,0.3)" wind-power="0" image="false" width="1366" height="667"></canvas>

<canvas class="snow-canvas" speed="2" interaction="true" size="6" count="30" start-color="rgba(253,252,251,1)" end-color="rgba(251,252,253,0.3)" opacity="0.00001" wind-power="2" image="false" width="1366" height="667"></canvas>

<canvas class="snow-canvas" speed="3" interaction="true" size="12" count="20" wind-power="-5" image="snow.png" width="1366" height="667"></canvas>

3. Initialize the plugin and done.

$(".snow-canvas").snow();

Change logs:

2015-04-30

  • freezes in safari for windows ,and mac too

2015-04-03

  • supports for ie6 now

2015-03-24

  • fixed for safari.

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