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. OK, I Understand
 
Top