Jump to content

Template:Party blast: Difference between revisions

From Gyaanipedia
VisualWikitext
Created page with "<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 c..."
Tags: Mobile edit Mobile web edit
 
No edit summary
Tags: Manual revert Mobile edit Mobile web edit
 
(4 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>

Latest revision as of 20:57, 3 November 2025

Retrieved from "https://en.gyaanipedia.com/index.php?title=Template:Party_blast&oldid=221054"