Last updated
Was this helpful?
Was this helpful?
/* 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>