Shab._0 द्वारा एक कोड

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

15 October 2025

अनुमान लगाने का खेल HTML जावास्क्रिप्ट कोड

25 November 2025

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Falling Skills Animation</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: linear-gradient(to bottom, #1a1a2e, #16213e);
            font-family: 'Arial', sans-serif;
            color: white;
            overflow: hidden;
            height: 100vh;
            width: 100vw;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

h1 {
            font-size: 3rem;
            text-align: center;
            margin-bottom: 1rem;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
            z-index: 100;
        }

.subtitle {
            font-size: 1.5rem;
            text-align: center;
            margin-bottom: 2rem;
            opacity: 0.8;
            z-index: 100;
        }

.skill {
            position: absolute;
            top: -50px;
            padding: 8px 16px;
            border-radius: 20px;
            font-weight: bold;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
            animation-name: falling;
            animation-timing-function: ease-in-out;
            animation-iteration-count: 1; /* Changed to 1 to fall only once */
            white-space: nowrap;
            text-align: center;
            z-index: 1;
            cursor: move; /* Indicate element is movable */
            touch-action: none; /* Prevent browser handling of all panning and zooming gestures */
        }

@keyframes falling {
            0% {
                transform: translateY(-50px) rotate(0deg);
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            100% {
                transform: translateY(calc(100vh - 60px)) rotate(360deg);
                opacity: 1;
            }
        }

.bg-html { background-color: #e34c26; }
        .bg-css { background-color: #264de4; }
        .bg-js { background-color: #f0db4f; color: black; }
        .bg-react { background-color: #61dafb; color: black; }
        .bg-node { background-color: #3c873a; }
        .bg-python { background-color: #306998; }
        .bg-java { background-color: #5382a1; }
        .bg-design { background-color: #ff7eb9; color: black; }
        .bg-agile { background-color: #8075ff; }
        .bg-data { background-color: #43b02a; }
        .bg-ai { background-color: #ff5757; }
        .bg-cloud { background-color: #00adef; }

footer {
            position: fixed;
            bottom: 20px;
            width: 100%;
            text-align: center;
            font-size: 0.8rem;
            opacity: 0.6;
            z-index: 100;
        }
    </style>
</head>
<body>

// Function to create a skill element
        function createSkill() {
            const skill = document.createElement('div');
            const randomSkill = skills[Math.floor(Math.random() * skills.length)];
            
            skill.textContent = randomSkill.name;
            skill.className = `skill ${randomSkill.class}`;
            
            // Random horizontal position
            const left = Math.random() * (window.innerWidth - 150);
            skill.style.left = `${left}px`;
            
            // Random animation duration
            const duration = 5 + Math.random() * 7;
            skill.style.animationDuration = `${duration}s`;
            
            // Random delay
            const delay = Math.random() * 2;
            skill.style.animationDelay = `${delay}s`;
            
            document.body.appendChild(skill);
            
            // Instead of removing, make the element stay at the bottom
            setTimeout(() => {
                skill.style.animation = 'none';
                skill.style.transform = `translateY(calc(100vh - 60px)) rotate(${Math.floor(Math.random() * 20 - 10)}deg)`;
                skill.style.transition = 'none';
                
                // Add a small random horizontal shift to create a pile effect
                const currentLeft = parseFloat(skill.style.left);
                const newLeft = currentLeft + (Math.random() * 40 - 20);
                skill.style.left = `${newLeft}px`;
                
                // Add a small z-index variation to create layering
                skill.style.zIndex = Math.floor(Math.random() * 10);
            }, (duration + delay) * 1000);
        }

// Create initial skills
        for (let i = 0; i < 20; i++) {
            setTimeout(createSkill, i * 300);
        }

// Add more skills periodically (but limit total to prevent overcrowding)
        const skillInterval = setInterval(() => {
            // Count current skills to avoid too many elements
            const currentSkills = document.querySelectorAll('.skill');
            if (currentSkills.length < 100) {
                createSkill();
            } else {
                // Stop generating new skills if there are too many
                clearInterval(skillInterval);
            }
        }, 800);

// Add skills on click
        document.addEventListener('click', () => {
            for (let i = 0; i < 5; i++) {
                setTimeout(createSkill, i * 100);
            }
        });
    </script>
</body>
</html>

Shab._0 द्वारा एक कोड

अनुशंसित

अनुमान लगाने का खेल HTML जावास्क्रिप्ट कोड

एक बगीचा उगाएँ

pan4o द्वारा एक कोड

HTML

CSS

JS

अनुशंसित

अनुमान लगाने का खेल HTML जावास्क्रिप्ट कोड

एक बगीचा उगाएँ

pan4o द्वारा एक कोड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS