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

अनुशंसित

30 March 2025

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

16 December 2024

<!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 द्वारा एक कोड

अनुशंसित

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

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

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

HTML

CSS

JS

अनुशंसित

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

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

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

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS