Tags: Mobile edit Mobile web edit |
Tags: Manual revert Mobile edit Mobile web edit |
| (3 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| <div id="party-blast-container" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999;"></div> | | <div id="party-blast-container" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999;"></div> |
|
| |
| <script>
| |
| (function() {
| |
| const container = document.getElementById('party-blast-container');
| |
| const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#96CEB4', '#FFEAA7', '#DFE6E9', '#A29BFE'];
| |
| const confettiCount = 150;
| |
| const duration = 10000; // 10 seconds
| |
|
| |
| function createConfetti() {
| |
| const confetti = document.createElement('div');
| |
| const size = Math.random() * 10 + 5;
| |
| const left = Math.random() * 100;
| |
| const animationDuration = Math.random() * 3 + 2;
| |
| const delay = Math.random() * 2;
| |
| const rotation = Math.random() * 360;
| |
| const shape = Math.random() > 0.5 ? 'square' : 'circle';
| |
|
| |
| confetti.style.position = 'absolute';
| |
| confetti.style.width = size + 'px';
| |
| confetti.style.height = size + 'px';
| |
| confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
| |
| confetti.style.left = left + '%';
| |
| confetti.style.top = '-20px';
| |
| confetti.style.borderRadius = shape === 'circle' ? '50%' : '0';
| |
| confetti.style.opacity = '0.8';
| |
| confetti.style.transform = `rotate(${rotation}deg)`;
| |
| confetti.style.animation = `fall ${animationDuration}s linear ${delay}s forwards`;
| |
|
| |
| return confetti;
| |
| }
| |
|
| |
| // Add CSS animation
| |
| const style = document.createElement('style');
| |
| style.textContent = `
| |
| @keyframes fall {
| |
| to {
| |
| transform: translateY(100vh) rotate(720deg);
| |
| opacity: 0;
| |
| }
| |
| }
| |
| `;
| |
| document.head.appendChild(style);
| |
|
| |
| // Create confetti
| |
| for (let i = 0; i < confettiCount; i++) {
| |
| container.appendChild(createConfetti());
| |
| }
| |
|
| |
| // Remove container after animation completes
| |
| setTimeout(() => {
| |
| container.remove();
| |
| }, duration);
| |
| })();
| |
| </script>
| |
