2 maxCount
: 150, //set max confetti count
3 speed
: 2, //set the particle animation speed
4 frameInterval
: 15, //the confetti animation frame interval in milliseconds
5 alpha
: 1.0, //the alpha opacity of the confetti (between 0 and 1, where 1 is opaque and 0 is invisible)
6 gradient
: false, //whether to use gradients for the confetti particles
7 start
: null, //call to start confetti animation (with optional timeout in milliseconds, and optional min and max random confetti count)
8 stop
: null, //call to stop adding confetti
9 toggle
: null, //call to start or stop the confetti animation depending on whether it's already running
10 pause
: null, //call to freeze confetti animation
11 resume
: null, //call to unfreeze confetti animation
12 togglePause
: null, //call to toggle whether the confetti animation is paused
13 remove
: null, //call to stop the confetti animation and remove all confetti immediately
14 isPaused
: null, //call and returns true or false depending on whether the confetti animation is paused
15 isRunning
: null //call and returns true or false depending on whether the animation is running
19 confetti
.start
= startConfetti
;
20 confetti
.stop
= stopConfetti
;
21 confetti
.toggle
= toggleConfetti
;
22 confetti
.pause
= pauseConfetti
;
23 confetti
.resume
= resumeConfetti
;
24 confetti
.togglePause
= toggleConfettiPause
;
25 confetti
.isPaused
= isConfettiPaused
;
26 confetti
.remove
= removeConfetti
;
27 confetti
.isRunning
= isConfettiRunning
;
28 var supportsAnimationFrame
= window
.requestAnimationFrame
|| window
.webkitRequestAnimationFrame
|| window
.mozRequestAnimationFrame
|| window
.oRequestAnimationFrame
|| window
.msRequestAnimationFrame
;
29 var colors
= ["rgba(30,144,255,", "rgba(107,142,35,", "rgba(255,215,0,", "rgba(255,192,203,", "rgba(106,90,205,", "rgba(173,216,230,", "rgba(238,130,238,", "rgba(152,251,152,", "rgba(70,130,180,", "rgba(244,164,96,", "rgba(210,105,30,", "rgba(220,20,60,"];
30 var streamingConfetti
= false;
31 var animationTimer
= null;
33 var lastFrameTime
= Date
.now();
38 function resetParticle(particle
, width
, height
) {
39 particle
.color
= colors
[(Math
.random() * colors
.length
) | 0] + (confetti
.alpha
+ ")");
40 particle
.color2
= colors
[(Math
.random() * colors
.length
) | 0] + (confetti
.alpha
+ ")");
41 particle
.x
= Math
.random() * width
;
42 particle
.y
= Math
.random() * height
- height
;
43 particle
.diameter
= Math
.random() * 10 + 5;
44 particle
.tilt
= Math
.random() * 10 - 10;
45 particle
.tiltAngleIncrement
= Math
.random() * 0.07 + 0.05;
46 particle
.tiltAngle
= Math
.random() * Math
.PI
;
50 function toggleConfettiPause() {
57 function isConfettiPaused() {
61 function pauseConfetti() {
65 function resumeConfetti() {
70 function runAnimation() {
73 else if (particles
.length
=== 0) {
74 context
.clearRect(0, 0, window
.innerWidth
, window
.innerHeight
);
75 animationTimer
= null;
78 var delta
= now
- lastFrameTime
;
79 if (!supportsAnimationFrame
|| delta
> confetti
.frameInterval
) {
80 context
.clearRect(0, 0, window
.innerWidth
, window
.innerHeight
);
82 drawParticles(context
);
83 lastFrameTime
= now
- (delta
% confetti
.frameInterval
);
85 animationTimer
= requestAnimationFrame(runAnimation
);
89 function startConfetti(timeout
, min
, max
) {
90 var width
= window
.innerWidth
;
91 var height
= window
.innerHeight
;
92 window
.requestAnimationFrame
= (function() {
93 return window
.requestAnimationFrame
||
94 window
.webkitRequestAnimationFrame
||
95 window
.mozRequestAnimationFrame
||
96 window
.oRequestAnimationFrame
||
97 window
.msRequestAnimationFrame
||
99 return window
.setTimeout(callback
, confetti
.frameInterval
);
102 var canvas
= document
.getElementById("confetti-canvas");
103 if (canvas
=== null) {
104 canvas
= document
.createElement("canvas");
105 canvas
.setAttribute("id", "confetti-canvas");
106 canvas
.setAttribute("style", "display:block;z-index:999999;pointer-events:none;position:fixed;top:0");
107 document
.body
.prepend(canvas
);
108 canvas
.width
= width
;
109 canvas
.height
= height
;
110 window
.addEventListener("resize", function() {
111 canvas
.width
= window
.innerWidth
;
112 canvas
.height
= window
.innerHeight
;
114 context
= canvas
.getContext("2d");
115 } else if (context
=== null)
116 context
= canvas
.getContext("2d");
117 var count
= confetti
.maxCount
;
121 count
= particles
.length
+ max
;
128 count
= particles
.length
+ ((Math
.random() * (max
- min
) + min
) | 0);
131 count
= particles
.length
+ min
;
133 count
= particles
.length
+ max
;
134 while (particles
.length
< count
)
135 particles
.push(resetParticle({}, width
, height
));
136 streamingConfetti
= true;
140 window
.setTimeout(stopConfetti
, timeout
);
144 function stopConfetti() {
145 streamingConfetti
= false;
148 function removeConfetti() {
154 function toggleConfetti() {
155 if (streamingConfetti
)
161 function isConfettiRunning() {
162 return streamingConfetti
;
165 function drawParticles(context
) {
168 for (var i
= 0; i
< particles
.length
; i
++) {
169 particle
= particles
[i
];
171 context
.lineWidth
= particle
.diameter
;
172 x2
= particle
.x
+ particle
.tilt
;
173 x
= x2
+ particle
.diameter
/ 2;
174 y2
= particle
.y
+ particle
.tilt
+ particle
.diameter
/ 2;
175 if (confetti
.gradient
) {
176 var gradient
= context
.createLinearGradient(x
, particle
.y
, x2
, y2
);
177 gradient
.addColorStop("0", particle
.color
);
178 gradient
.addColorStop("1.0", particle
.color2
);
179 context
.strokeStyle
= gradient
;
181 context
.strokeStyle
= particle
.color
;
182 context
.moveTo(x
, particle
.y
);
183 context
.lineTo(x2
, y2
);
188 function updateParticles() {
189 var width
= window
.innerWidth
;
190 var height
= window
.innerHeight
;
193 for (var i
= 0; i
< particles
.length
; i
++) {
194 particle
= particles
[i
];
195 if (!streamingConfetti
&& particle
.y
< -15)
196 particle
.y
= height
+ 100;
198 particle
.tiltAngle
+= particle
.tiltAngleIncrement
;
199 particle
.x
+= Math
.sin(waveAngle
) - 0.5;
200 particle
.y
+= (Math
.cos(waveAngle
) + particle
.diameter
+ confetti
.speed
) * 0.5;
201 particle
.tilt
= Math
.sin(particle
.tiltAngle
) * 15;
203 if (particle
.x
> width
+ 20 || particle
.x
< -20 || particle
.y
> height
) {
204 if (streamingConfetti
&& particles
.length
<= confetti
.maxCount
)
205 resetParticle(particle
, width
, height
);
207 particles
.splice(i
, 1);