गड़बड़ प्रभाव होमपेज: HTML, CSS, टेलविंड

153 alejandrokundrah

संपादक में खोलें अपना कोड प्रकाशित करें क्या आपको एक वेबसाइट चाहिए?

गड़बड़ प्रभाव होमपेज: HTML, CSS, टेलविंड

अनुशंसित

12 July 2025

सीएसएस कार्ड चमक प्रभाव

18 August 2024

होवर और धुंधला प्रभाव वाली साइटों की गैलरी

22 August 2024

3डी होवर प्रभाव के साथ एनिमेटेड कार्ड

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>

अनुशंसित

सीएसएस कार्ड चमक प्रभाव

होवर और धुंधला प्रभाव वाली साइटों की गैलरी

3डी होवर प्रभाव के साथ एनिमेटेड कार्ड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS