Webleb - HTML UI Elements - Un codice di 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 codice di Shab._0

Consigliato

Un codice di Metehan

Un codice di ribeirosarah905

Un codice di ytr3d3

HTML

CSS

JS

Consigliato

Un codice di Metehan

Un codice di ribeirosarah905

Un codice di ytr3d3

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS