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

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.