Webleb - fragmentos de código - Un código de Shab.

HTML

<!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>

Un código de Shab._0

Recomendado

Tarjetas móviles delineadas de CodePen Home

Efecto de luz en el ícono social

Un código de creativefunction305

HTML

CSS

JS

Recomendado

Tarjetas móviles delineadas de CodePen Home

Efecto de luz en el ícono social

Un código de creativefunction305

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS