Page d'accueil de Glitch Effect : HTML, CSS, Tailwind

1,280 alejandrokundrah

Ouvrir dans l'éditeur Publiez votre code

Page d'accueil de Glitch Effect : HTML, CSS, Tailwind

Recommandé

4 July 2025

Page de connexion à Voice Lab : formulaire de connexion Google et de courrier électronique

10 February 2025

Un code par bachir123

18 December 2025

Configuration du chargeur HTML5 et de Firebase pour le jeu Escape Road

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>

CSS