Homepage di Glitch Effect: HTML, CSS, Tailwind

1083 alejandrokundrah

Apri nell'Editor Video Pubblica il Tuo Codice

Homepage di Glitch Effect: HTML, CSS, Tailwind

Consigliato

21 July 2025

Modulo di accesso HTML con sfondo geometrico

23 August 2025

Modello di sito web portfolio per web designer

16 January 2026

Codice HTML del lettore di giochi Flash Ruffle

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Voidscape - Mind-Bending Homepage</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body { 
            margin: 0; 
            overflow-x: hidden; 
            background: #000; 
            font-family: 'Courier New', monospace;
            display: flex;
            flex-direction: column;
        }
        canvas { 
            position: fixed; 
            top: 0; 
            left: 0; 
            z-index: -1; 
        }
        .glitch {
            position: relative;
            color: #fff;
            text-shadow: 0 0 5px #666, 0 0 10px #333;
            animation: glitch 0.8s linear infinite;
        }
        .glitch::before, .glitch::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            color: #ccc;
        }
        .glitch::before { 
            left: 2px; 
            text-shadow: -2px 0 #666; 
            animation: glitch-top 0.9s linear infinite;
        }
        .glitch::after { 
            left: -2px; 
            text-shadow: 2px 0 #666; 
            animation: glitch-bottom 0.7s linear infinite;
        }
        @keyframes glitch {
            2%, 64% { transform: translate(2px, 0); }
            4%, 60% { transform: translate(-2px, 0); }
            62% { transform: translate(0, 2px); }
            0%, 66%, 100% { transform: translate(0, 0); }
        }
        @keyframes glitch-top {
            2%, 64% { transform: translate(2px, -2px); }
            4%, 60% { transform: translate(-2px, 2px); }
            62% { transform: translate(0, -2px); }
            0%, 66%, 100% { transform: translate(0, 0); }
        }
        @keyframes glitch-bottom {
            2%, 64% { transform: translate(-2px, 2px); }
            4%, 60% { transform: translate(2px, -2px); }
            62% { transform: translate(0, 2px); }
            0%, 66%, 100% { transform: translate(0, 0); }
        }
    </style>
</head>
<body>
    <canvas id="bg"></canvas>
    <nav class="bg-black bg-opacity-70 p-4 sticky top-0 z-10 flex justify-between items-center">
        <div class="container mx-auto flex justify-between items-center">
            <div class="text-2xl font-bold text-white glitch" data-text="VOIDSCAPE">VOIDSCAPE</div>
            <div class="space-x-4">
                <a href="#home" class="text-white hover:text-gray-400 transition">Home</a>
                <a href="#about" class="text-white hover:text-gray-400 transition">About</a>
                <a href="#contact" class="text-white hover:text-gray-400 transition">Contact</a>
            </div>
        </div>
    </nav>
    <section id="home" class="min-h-screen flex items-center justify-center">
        <div class="text-center">
            <h1 class="text-6xl md:text-8xl text-white glitch" data-text="STEP INTO THE VOID">STEP INTO THE VOID</h1>
            <p class="text-xl md:text-2xl text-gray-400 mt-4 opacity-75">A Monochromatic Descent into Chaos</p>
            <a href="#about" class="mt-6 inline-block px-6 py-3 bg-gray-800 text-white font-bold rounded hover:bg-gray-600 transition">Discover More</a>
        </div>
    </section>
    <section id="about" class="min-h-screen flex items-center justify-center bg-black bg-opacity-70">
        <div class="container mx-auto text-center text-white">
            <h2 class="text-4xl md:text-5xl glitch" data-text="THE VOID AWAITS">THE VOID AWAITS</h2>
            <p class="mt-4 text-lg max-w-2xl mx-auto text-gray-400">Enter a distorted digital realm where glitches twist reality. This homepage is your portal to a surreal, monochromatic experience driven by chaotic motion.</p>
        </div>
    </section>
    <section id="contact" class="min-h-screen flex items-center justify-center bg-black bg-opacity-70">
        <div class="container mx-auto text-center text-white">
            <h2 class="text-4xl md:text-5xl glitch" data-text="JOIN THE DISTORTION">JOIN THE DISTORTION</h2>
            <p class="mt-4 text-lg max-w-2xl mx-auto text-gray-400">Have a vision to warp the void? Connect with us to create something truly unsettling.</p>
            <a href="mailto:contact@voidscape.com" class="mt-6 inline-block px-6 py-3 bg-gray-800 text-white font-bold rounded hover:bg-gray-600 transition">Reach Out</a>
        </div>
    </section>
    <script>
        // Particle system
        const canvas = document.getElementById('bg');
        const ctx = canvas.getContext('2d');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

// Initialize particles
        for (let i = 0; i < 100; i++) particles.push(new Particle());

// Animation loop
        function animate() {
            ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            particles.forEach(p => {
                p.update();
                p.draw();
            });
            requestAnimationFrame(animate);
        }
        animate();

// Mouse interaction
        canvas.addEventListener('mousemove', (e) => {
            for (let i = 0; i < 3; i++) {
                const p = new Particle();
                p.x = e.clientX;
                p.y = e.clientY;
                p.size = Math.random() * 8 + 4;
                particles.push(p);
            }
        });

// Handle resize
        window.addEventListener('resize', () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        });
    </script>
</body>
</html>

Consigliato

Modulo di accesso HTML con sfondo geometrico

Modello di sito web portfolio per web designer

Codice HTML del lettore di giochi Flash Ruffle

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS