Falling Snow Effect with jQuery and HTML5 Canvas - Let It Snow
File Size: | 33.3 KB |
---|---|
Views Total: | 7586 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Let It Snow is a jQuery plugin to add customizable and realistic (or virtual) snow falling animations on your website using jQuery and Html5 canvas
element.
More examples:
- Demo 1 Default settings.
- Demo 2 Speed Control.
- Demo 3 Wind Control.
- Demo 4 Color & Size Control.
- Demo 5 Time To Go Crazy.
- Demo 6 Custom Image.
Your might also like:
- Realistic Raindrops Effect with Canvas and Rainyday.js
- Creating Snow Falling Effect with jQuery snowfall Plugin
- Yet Another Falling Snow Animation with jQuery and Canvas - GlauserChristmas
Basic Usage:
1. Include jQuery javascript library and JQuery let it snow plugin in the page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.let_it_snow.min.js"></script>
2. Create an Html canvas
element and make it full screen.
<canvas width="100%" height="100%" class="snow"></canvas>
3. Call the plugin on the canvas
element with default settings.
<script type="text/javascript"> $(document).ready( function() { $("canvas.snow").let_it_snow(); }); </script>
4. Customize the falling snow effect.
<script type="text/javascript"> $(document).ready( function() { $("canvas.snow").let_it_snow({ speed: 0, interaction: true, size: 2, count: 200, opacity: 0, color: "#ffffff", windPower: 0, image: false }); }); </script>
This awesome jQuery plugin is developed by Balancer. For more Advanced Usages, please check the demo page or visit the official website.