Spot the differences

#confetti-wrapper { position: absolute; width: 100%; height: 100vh; overflow: hidden; } #confettiCanvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } (function () { const canvas = document.getElementById('confettiCanvas'); const ctx = canvas.getContext('2d'); let confetti = []; let currentPhase = 'explosion'; let explosionTime = 0; const centerX = canvas.width / 2; const centerY = canvas.height / 4; // Couleurs spécifiques demandées const colors = ['#3dcdc0', '#f07475', '#f5d001', '#ffb346']; function resizeCanvas() { const wrapper = document.getElementById('confetti-wrapper'); canvas.width = wrapper.offsetWidth; canvas.height = wrapper.offsetHeight; } window.addEventListener('resize', resizeCanvas); resizeCanvas(); function drawStar(x, y, size, color, rotation = 0, hasTrail = false) { ctx.save(); ctx.translate(x, y); ctx.rotate(rotation); // Traînée uniquement pendant la phase d'explosion if (hasTrail && currentPhase === 'explosion') { ctx.strokeStyle = `rgba(255, 255, 255, 0.8)`; ctx.lineWidth = size * 0.2; ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(-size * 0.4, size * 0.4); ctx.stroke(); } // Dessiner l'étoile ctx.fillStyle = color; ctx.beginPath(); for (let i = 0; i < 5; i++) { ctx.lineTo( Math.cos((i * 2 * Math.PI) / 5 - Math.PI / 2) * size, Math.sin((i * 2 * Math.PI) / 5 - Math.PI / 2) * size ); ctx.lineTo( Math.cos(((i * 2 + 1) * Math.PI) / 5 - Math.PI / 2) * size / 2, Math.sin(((i * 2 + 1) * Math.PI) / 5 - Math.PI / 2) * size / 2 ); } ctx.closePath(); ctx.fill(); ctx.restore(); } function createConfetti() { confetti = []; // Phase d'explosion (166 confettis - 3 fois moins) for (let i = 0; i 0.8, // 20% des étoiles ont une traînée alpha: 1 }); } // Phase de chute (3-4 confettis) for (let i = 0; i { if (c.y > centerY) { c.x += c.speedX; c.y += c.speedY; c.speedY += 0.01; // Gravité très légère c.speedX += c.drift; c.rotation += c.rotationSpeed; c.alpha = 1 - (explosionTime / 1000); } }); if (explosionTime >= 1000) { currentPhase = 'fall'; confetti = confetti.filter(c => !c.isExploding); } } else { confetti.forEach(c => { c.y += c.speedY; c.x += c.speedX; c.rotation += c.rotationSpeed; if (c.y > canvas.height + c.size) { c.y = -20 - Math.random() * 30; c.x = Math.random() * canvas.width; } }); } } function drawConfetti() { ctx.clearRect(0, 0, canvas.width, canvas.height); confetti.forEach(c => { ctx.globalAlpha = c.alpha; drawStar(c.x, c.y, c.size, c.color, c.rotation, c.hasTrail); }); ctx.globalAlpha = 1; } // Initialisation de l'animation let running = false; // Fonction pour démarrer l'animation function startAnimation() { if (running) return; running = true; createConfetti(); animate(); } // Vérification de visibilité avec IntersectionObserver const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting && entry.intersectionRatio >= 0.333) { startAnimation(); observer.unobserve(entry.target); // Désactive après déclenchement } }); }, { threshold: [0.333] // Seuil à 1/3 de visibilité }); // Démarre l'observation observer.observe(document.getElementById('confetti-wrapper')); document.addEventListener("visibilitychange", () => { running = !document.hidden; }); function animate() { if (running) { updateConfetti(); drawConfetti(); } requestAnimationFrame(animate); } })();