Confetti Celebration for Webpage

Confetti celebration to trigger only once per session, even if the user reloads the page multiple times. The simplest way is to use sessionStorage (built into browsers). It persists for the current browser tab/session but resets when the tab is closed.

<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
  // check if celebration has already run in this session
  if (!sessionStorage.getItem("celebrationDone")) {
    setTimeout(function() {
      confetti({
        particleCount: 150,
        spread: 70,
        origin: { y: 0.6 }
      });
      // mark as done
      sessionStorage.setItem("celebrationDone", "true");
    }, 2000);
  }
});
</script>

Leave a Reply