Author: | mathusummut |
---|---|
Views Total: | 42,257 views |
Official Page: | Go to website |
Last Update: | August 28, 2019 |
License: | MIT |
Preview:

Description:
confetti.js is a vanilla JS library for creating a configurable, high-performance confetti falling animation using HTML5 canvas and requestAnimFrame API.
How to use it:
Download and import the JavaScript ‘confetti.js’ into the html document.
<script src="confetti.js"></script>
Start the confetti falling animation.
startConfetti();
Stop the confetti falling animation.
stopConfetti();
Toggle the confetti falling animation.
toggleConfetti();
Pause the confetti falling animation.
pauseConfetti();
Resume the confetti falling animation.
resumeConfetti();
Toggle whether the confetti animation is paused.
togglePause();
Destroy the confetti falling animation.
removeConfetti();
Check if the animation is running.
isRunning();
Check if the animation is paused.
isPaused();
Specify the maximum number of the confetti.
confetti.maxCount = 200;
Set the animation speed in milliseconds.
confetti.particleSpeed = 3;
Set the frame interval.
confetti.frameInterval = 20;
Set the alpha opacity.
confetti.alpha = 1.0;
Decide whether to use gradients
confetti.gradient = false;
Changelog:
08/28/2019
- Small potential bug fixes
08/01/2019
- stop confetti drifting to the right
06/10/2019
- Modified confetti max behaviour
06/09/2019
- Simplified usage
06/05/2019
- Bugfix
06/03/2019
- Added gradient and transparency support
04/29/2019
- Updated
02/05/2019
- Added isConfettiRunning function
Really awesome, minimalistic and clean! Thumbs up
Does this not work with GoDaddy websites? I’m having the hardest time trying to get it to work.
(index):8 Uncaught ReferenceError: startConfetti is not defined
at HTMLButtonElement.onclick ((index):8) que hago? me sale este error
use confetti.start()
Great script, thank You!
Nice 🙂 Thanks!
Thank you so much for sharing your effort! 😀
Hi there, really nice work!! Thanks for your effort!!! I just can’t get the confetti to stop! 😀 Where and what do I have to edit in your file, to make it stop after 5 sec.? Thanks! 🙂
How do we put it in a html document ? @birdenhans ?
hi, thanks for this great script! Is it possible to use images (PNG or SVG) for each confetti particle?
Cool script. Thanks
Very neat project! Is this available on npm? Or do we need to download the script?
Thanks! BTW, the methods have been renamed to be confetti.start(), confetti.stop(), confetti.toggle(), etc.