• API
• FAQ
• Tools
• Archive
SHARE
TWEET

# Confetti JS

a guest Aug 24th, 2019 76 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
1. // Confetti
2.
3. var defaultColors = ["#a864fd", "#29cdff", "#78ff44", "#ff718d", "#fdff6a"];
4.
5. function createElements(t, e, a) {
6.     return Array.from({length: e}).map(function (e, s) {
7.         var n = document.createElement("div"), o = a[s % a.length];
8.         return n.style["background-color"] = o, n.style.width = "10px", n.style.height = "10px", n.style.position = "absolute", t.appendChild(n), n
9.     })
10. }
11.
12. function randomPhysics(t, e, a, s) {
13.     var n = t * (Math.PI / 180), o = e * (Math.PI / 180);
14.     return{x: 0, y: 0, wobble: 10 * s(), velocity: .5 * a + s() * a, angle2D: -n + (.5 * o - s() * o), angle3D: -(Math.PI / 4) + s() * (Math.PI / 2), tiltAngle: s() * Math.PI}
15. }
16.
17. function updateFetti(t, e, a) {
18.     t.physics.x += Math.cos(t.physics.angle2D) * t.physics.velocity, t.physics.y += Math.sin(t.physics.angle2D) * t.physics.velocity, t.physics.z += Math.sin(t.physics.angle3D) * t.physics.velocity, t.physics.wobble += .1, t.physics.velocity *= a, t.physics.y += 3, t.physics.tiltAngle += .1;
19.     var s = t.physics, n = s.x, o = s.y, i = s.tiltAngle, d = s.wobble, r = n + 10 * Math.cos(d), l = o + 10 * Math.sin(d), c = "translate3d(" + r + "px, " + l + "px, 0) rotate3d(1, 1, 1, " + i + "rad)";
20.     t.element.style.transform = c
21. }
22.
23. function animate(t, e, a) {
24.     function s() {
25.         e.forEach(function (t) {
26.             return updateFetti(t, o / n, a)
27.         }), o += 1, n > o ? requestAnimationFrame(s) : e.forEach(function (e) {
28.             return e.element.parentNode === t ? t.removeChild(e.element) : void 0
29.         })
30.     }
31.
32.     var n = 200, o = 0;
33.     requestAnimationFrame(s)
34. }
35.
36. function confetti(t) {
37.     var e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {}, a = e.angle, s = void 0 === a ? 90 : a, n = e.decay, o = void 0 === n ? .9 : n, i = e.spread, d = void 0 === i ? 45 : i, r = e.startVelocity, l = void 0 === r ? 45 : r, c = e.elementCount, f = void 0 === c ? 50 : c, u = e.colors, h = void 0 === u ? defaultColors : u, p = e.random, m = void 0 === p ? Math.random : p, _ = createElements(t, f, h), \$ = _.map(function (t) {
38.         return{element: t, physics: randomPhysics(s, d, l, m)}
39.     });
40.     animate(t, \$, o)
41. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.

Top