Confetti Effect

Right Fountain

/* Confetti Styles */
.confetti {
  position: fixed;
  width: 8px;
  height: 8px;
  background-color: red; /* Default color, overridden by JS */
  opacity: 0.8;
  pointer-events: none;
  z-index: 9999;
  will-change: transform, opacity;
  animation: confetti-move 1s linear forwards; /* Linear animation for smooth movement */
}

@keyframes confetti-move {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: translate3d(var(--translateX), -100vh, 0) rotate(360deg);
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--translateX), 0, 0) rotate(720deg);
    opacity: 0;
  }
}

<script>
  window.rightFountainsConfettiOptions = {
    colors: ['#e91e63', '#9c27b0', '#2196f3', '#4caf50', '#ffeb3b', '#ff5722'], // Your desired colors
    buttonSelector: '#button-pRJFXvGVi4',      // Your button's selector
    confettiPerSpray: 300,                     // Number of confetti pieces per spray
    animationDuration: { min: 1, max: 4 }      // Animation duration range in seconds
  };
  
  document.addEventListener('DOMContentLoaded', function() {
  // Use user-defined options or defaults
  const confettiOptions = window.rightFountainsConfettiOptions || {};

  const defaultButtonSelector = '#button-pRJFXvGVi4';
  const buttonSelector = confettiOptions.buttonSelector || defaultButtonSelector;

  const button = document.querySelector(buttonSelector);

  if (!button) {
    console.warn(`Right Fountains Confetti: Button not found for selector "${buttonSelector}"`);
    return;
  }

  const defaultColors = ['#094bcf', '#feb959', '#feffff', '#6b8eed', '#f33452', '#00186a'];
  const colors = confettiOptions.colors || defaultColors;

  const totalSprays = 6;
  const defaultConfettiPerSpray = 300;
  const confettiPerSpray = confettiOptions.confettiPerSpray || defaultConfettiPerSpray;
  const sprayInterval = 250;

  button.addEventListener('click', function(event) {
    const viewportWidth = window.innerWidth;
    const startX = viewportWidth - 20;
    const startY = 20;

    for (let spray = 0; spray < totalSprays; spray++) {
      setTimeout(() => {
        const sprayStartX = startX - (spray * (viewportWidth - 40) / (totalSprays - 1));
        createSpray(sprayStartX, startY);
      }, spray * sprayInterval);
    }
  });

  function createSpray(x, y) {
    const fragment = document.createDocumentFragment();
    for (let i = 0; i < confettiPerSpray; i++) {
      const confetti = createConfettiPiece(x, y);
      fragment.appendChild(confetti);
    }
    document.body.appendChild(fragment);
  }

  function createConfettiPiece(x, y) {
    const confetti = document.createElement('div');
    confetti.classList.add('confetti');

    const defaultAnimationDuration = { min: 2, max: 3 };
    const animationDuration = confettiOptions.animationDuration || defaultAnimationDuration;

    const shouldReachTop = Math.random() < 0.7;
    let duration;
    if (shouldReachTop) {
      duration = Math.random() * (animationDuration.max - animationDuration.min) + animationDuration.min;
    } else {
      duration = Math.random() * ((animationDuration.max + 1) - animationDuration.min) + animationDuration.min;
    }
    confetti.style.animationDuration = `${duration}s`;

    confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];

    const size = Math.random() * 4 + 6;
    confetti.style.width = `${size}px`;
    confetti.style.height = `${size}px`;

    confetti.style.left = `${x}px`;
    confetti.style.bottom = `${y}px`;

    const maxTranslateX = 250;
    const translateX = (Math.random() - 0.5) * maxTranslateX * 2;
    confetti.style.setProperty('--translateX', `${translateX}px`);

    const rotate = Math.random() * 720;
    confetti.style.transform = `rotate(${rotate}deg)`;

    confetti.style.opacity = Math.random() * 0.3 + 0.7;

    confetti.style.animationDelay = `${Math.random() * 0.2}s`;

    confetti.addEventListener('animationend', () => {
      confetti.remove();
    });

    return confetti;
  }
});
</script>

Left Fountain

Bottom Fountain