Using jsConfetti Effects

This guide explains how to use jsConfetti for both page load effects and button click effects. Follow the examples below to add confetti animations to your pages.

1. Button Click Effects

To trigger a confetti effect with a button click, use the following code. You can include any of the predefined JavaScript functions (like burstExplosion()) as the onclick event on your buttons.

<button class="btn btn-primary" onclick="burstExplosion()">Burst Explosion</button>

<script>
  function burstExplosion() {
    confetti({ particleCount: 200, spread: 70, startVelocity: 60, origin: { y: 0.6 } });
  }
</script>

In this example, clicking the Burst Explosion button triggers a confetti animation. Add similar buttons for other effects by using different functions like cannonBlast() or fallingSnow().

2. Page Load Effects

To automatically trigger a confetti effect when a page loads, add the confetti function inside the window.onload event handler. Here’s an example of how to set up a page that displays the Raining Money effect as soon as it loads:

<script>
  window.onload = function() {
    rainingMoney();
  };

  function rainingMoney() {
    var duration = 5 * 1000;
    var end = Date.now() + duration;

    (function frame() {
      confetti({
        particleCount: 1,
        startVelocity: 0,
        ticks: 300,
        shapes: ['square'],
        spread: 70,
        origin: { x: Math.random(), y: 0 },
        colors: ['#00ff00']
      });
      if (Date.now() < end) requestAnimationFrame(frame);
    })();
  }
</script>

In this example, the rainingMoney() function runs automatically when the page loads. Replace rainingMoney() with other functions like confettiFountain() or fireworksBurst() for different effects.

Available Confetti Effects

Here’s a quick reference of available effects you can use with either method:

burstExplosion() - A burst of confetti from the center
cannonBlast() - A cannon-like blast from the bottom
fallingSnow() - Slow snowfall of confetti
confettiFountain() - A fountain-like effect from the bottom
sideToSideSweep() - Confetti sweeps from side to side
heartShapedConfetti() - A burst of heart-colored confetti
starShower() - Star-shaped confetti falls from the top
fireworksBurst() - Fireworks-style bursts in the center
rainingMoney() - Confetti resembling falling dollar bills
randomBursts() - Random bursts from different screen locations

Example Page Structure

Here’s an example of how to structure a page that has both a button click effect and a page load effect:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Confetti Example</title>
  <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js"></script>
</head>
<body>
  <h1>Click the Button for Confetti!</h1>
  <button onclick="burstExplosion()">Burst Explosion</button>

  <script>
    window.onload = function() {
      rainingMoney();
    };

    function burstExplosion() {
      confetti({ particleCount: 200, spread: 70, startVelocity: 60, origin: { y: 0.6 } });
    }

    function rainingMoney() {
      var duration = 5 * 1000;
      var end = Date.now() + duration;
      (function frame() {
        confetti({
          particleCount: 1,
          startVelocity: 0,
          ticks: 300,
          shapes: ['square'],
          spread: 70,
          origin: { x: Math.random(), y: 0 },
          colors: ['#00ff00']
        });
        if (Date.now() < end) requestAnimationFrame(frame);
      })();
    }
  </script>
</body>
</html>

In this example, the Raining Money effect starts when the page loads, while the Burst Explosion effect can be triggered by clicking the button.