63 lines
2.2 KiB
JavaScript
63 lines
2.2 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function() {
|
|
// Initialize confetti effect on page load
|
|
initConfetti();
|
|
|
|
// Add confetti effect to welcome section button click
|
|
const welcomeButton = document.querySelector('.welcome-button');
|
|
if (welcomeButton) {
|
|
welcomeButton.addEventListener('click', function() {
|
|
createConfetti();
|
|
});
|
|
}
|
|
|
|
// Add confetti effect to any button with data-confetti attribute
|
|
document.querySelectorAll('[data-confetti]').forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
createConfetti();
|
|
});
|
|
});
|
|
});
|
|
|
|
function initConfetti() {
|
|
// Create a splash confetti effect when the page loads
|
|
setTimeout(() => {
|
|
createConfetti();
|
|
}, 500);
|
|
}
|
|
|
|
function createConfetti() {
|
|
const confettiCount = 150;
|
|
const colors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#feca57', '#ff9ff3', '#54a0ff'];
|
|
|
|
for (let i = 0; i < confettiCount; i++) {
|
|
const confetti = document.createElement('div');
|
|
confetti.style.position = 'fixed';
|
|
confetti.style.width = Math.random() * 10 + 5 + 'px';
|
|
confetti.style.height = Math.random() * 10 + 5 + 'px';
|
|
confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
|
|
confetti.style.borderRadius = '50%';
|
|
confetti.style.zIndex = '9999';
|
|
confetti.style.left = Math.random() * 100 + 'vw';
|
|
confetti.style.top = '-10px';
|
|
|
|
document.body.appendChild(confetti);
|
|
|
|
// Animate confetti falling
|
|
const animationDuration = Math.random() * 3 + 2;
|
|
const targetX = (Math.random() - 0.5) * 100;
|
|
|
|
confetti.animate([
|
|
{ transform: 'translate(0, 0) rotate(0deg)', opacity: 1 },
|
|
{ transform: `translate(${targetX}vw, 100vh) rotate(${Math.random() * 360}deg)`, opacity: 0 }
|
|
], {
|
|
duration: animationDuration * 1000,
|
|
easing: 'cubic-bezier(0.1, 0.8, 0.2, 1)'
|
|
});
|
|
|
|
// Remove confetti after animation
|
|
setTimeout(() => {
|
|
confetti.remove();
|
|
}, animationDuration * 1000);
|
|
}
|
|
}
|