Webleb - Snippet di Codice - 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

Struttura HTML del contenitore di animazione CSS

Codice HTML incorporato per il gioco Level Devil

Struttura HTML della barra di avanzamento animata CSS

HTML

CSS

JS

Consigliato

Struttura HTML del contenitore di animazione CSS

Codice HTML incorporato per il gioco Level Devil

Struttura HTML della barra di avanzamento animata CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS