Confetti Animation Effect With jQuery And Canvas - Confetti.js
File Size: | 3.67 KB |
---|---|
Views Total: | 34942 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Confetti.js is a small jQuery plugin which makes uses of HTML5 canvas to create a fullscreen, great-looing confetti falling effect on the webpage.
How to use it:
1. To use this plugin, just load the Confetti.js after jQuery library and we're done.
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script> <script src="jquery.confetti.js"></script>
2. Create control buttons to start/stop/restart the confetti effect.
<button id="startConfetti">Start</button> <button id="stopConfetti">Stop</button> <button id="restartConfetti">Restart</button>
3. Set the maximum amount of the particles.
var mp = 150
4. Set the color of the particles.
var particleColors = { colorOptions: ["DodgerBlue", "OliveDrab", "Gold", "pink", "SlateBlue", "lightblue", "Violet", "PaleGreen", "SteelBlue", "SandyBrown", "Chocolate", "Crimson"], colorIndex: 0, colorIncrementer: 0, colorThreshold: 10 }
This awesome jQuery plugin is developed by benevolenttech. For more Advanced Usages, please check the demo page or visit the official website.