<main>
  <button id="Trigger">紙吹雪</button>
</main>
* {
  margin: 0;
  padding: 0;
}
main {
  position: relative;
  display: block;
  width: 100%;
  height: 100vh;
  background-color: black;
}
button {
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px;
  border: none;
  border-radius: 4px;
  background-color: white;
}
document.getElementById('Trigger').addEventListener('click', () => {
  
  var count = 500;
  var colors = ['#ddde31', '#aea700', '#dfd136', '#dddbdc'];
  var defaults = {
    angle: 90,
    spread: 180,
    startVelocity: 60,
    origin: {
      x: 0.5,
      y: 0.8
    },
    colors: colors
  };

  function fire(particleRatio, opts) {
    confetti({
      ...defaults,
      ...opts,
      particleCount: Math.floor(count * particleRatio)
    });
  }

  fire(0.25, {
    spread: 26,
    startVelocity: 55,
  });
  
  fire(0.2, {
    spread: 60,
  });
  
  fire(0.35, {
    spread: 100,
    scalar: 0.8
  });
  
  fire(0.1, {
    startVelocity: 25,
    decay: 0.92,
    scalar: 1.2
  });
  
  fire(0.1, {
    spread: 120,
    startVelocity: 45,
  });
  
  // particleRatioが全部で1、particleCountが500になるようにしています
  
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.min.js