Web siteniz veya projeniz için dikkat çekici bir Matrix tarzı efekt mi oluşturmak istiyorsunuz? Biraz JavaScript, HTML5 Canvas ve CSS kullanarak, The Matrix filmindeki ikonik dijital yağmuru simüle eden etkileyici bir animasyon oluşturabilirsiniz. Bu blog yazısında, aşağıdaki kodu kullanarak bunu nasıl yapacağınızı adım adım anlatacağız.

matrix efekti
matrix efekti

Efektin Genel Görünümü

Bu proje şunları bir araya getiriyor:

  • Matrix tarzı dijital yağmur animasyonu, HTML5 <canvas> elemanı kullanılarak oluşturulmuştur.
  • Dinamik olarak harflerin göründüğü “Hoşgeldiniz” mesajı animasyonu.
  • Efekti başlatan ve yavaşça kaybolan bir başlangıç düğmesi.

Kullanıcılar “Enter the Matrix” düğmesine tıkladıklarında, The Matrix‘te görülen dijital yağmuru taklit eden yeşil metinlerin aktığı bir animasyonla karşılaşırlar. Birkaç saniye sonra, “Hoşgeldiniz” mesajı harf harf görünmeye başlar.

Kodun Açıklaması

1. HTML Yapısı

HTML oldukça basit. Şunları içerir:

  • Animasyonu başlatmak için bir <button>.
  • Matrix efektini çizmek için bir <canvas> elemanı.
  • Animasyonlu “Hoşgeldiniz” mesajını göstermek için bir <div>.
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Matrix'e Gir</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: #051e09;
            font-family: Arial, sans-serif;
        }
        #startButton {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 15px 30px;
            background: #0a3c1b;
            color: lime;
            border: 2px solid lime;
            font-size: 50px;
            cursor: pointer;
            text-transform: uppercase;
            transition: .3s all ease;
            z-index: 10;
        }
        #startButton:hover {
            background: lime;
            color: #0a3c1b;
            padding: 20px 35px;
        }
        canvas {
            position: absolute;
            top: 0;
            left: 0;
        }
        #welcomeMessage {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: lime;
            font-size: 5rem;
            text-transform: uppercase;
            text-shadow: 0 0 10px lime, 0 0 20px lime;
            display: flex;
            gap: 0.5rem;
            z-index: 5;
        }
        .welcome-letter {
            opacity: 0.4;
        }
    </style>
</head>
<body>
    <button id="startButton">Matrix'e Gir</button>
    <canvas id="matrix"></canvas>
    <div id="welcomeMessage"></div>

    <script>
        // Kod burada başlıyor
    </script>
</body>
</html>

2. CSS Stilleri

Bu stiller, karanlık bir arka plan oluşturur ve düğmeyi ile “Hoşgeldiniz” mesajını ekranın ortasına yerleştirir. Düğmeye kullanıcı etkileşimi için bir hover efekti eklenmiştir.

3. JavaScript İşlevselliği

JavaScript üç ana işlevsellik içerir:

a) Matrix Efekti

Dijital yağmur şu şekilde simüle edilir:

  • Bir karakter dizisi (harfler ve sayılar).
  • Akan metinlerin sütunlar olarak temsil edilmesi.
  • Belirli aralıklarla draw işlevi ile güncellenen bir canvas.
const canvas = document.getElementById('matrix');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
const fontSize = 16;
const columns = canvas.width / fontSize;
const drops = Array.from({ length: columns }).fill(1);

function draw() {
    ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    ctx.fillStyle = 'lime';
    ctx.font = `${fontSize}px monospace`;

    drops.forEach((y, index) => {
        const text = letters[Math.floor(Math.random() * letters.length)];
        const x = index * fontSize;
        ctx.fillText(text, x, y * fontSize);

        if (y * fontSize > canvas.height && Math.random() > 0.975) {
            drops[index] = 0;
        }
        drops[index]++;
    });
}
setInterval(draw, 50);

b) Hoşgeldiniz Mesajı Animasyonu

Bu işlev, “HOŞGELDİNİZ” kelimesindeki her harfi dinamik olarak ortaya çıkarır ve heyecan verici bir etki yaratır:

const welcomeText = "HOŞGELDİNİZ";

function revealWelcomeLetter(index) {
    return new Promise((resolve) => {
        const letterElement = document.createElement('span');
        welcomeMessage.appendChild(letterElement);

        let currentLetter = '';
        const interval = setInterval(() => {
            currentLetter = letters[Math.floor(Math.random() * letters.length)];
            letterElement.textContent = currentLetter;
        }, 80);

        setTimeout(() => {
            clearInterval(interval);
            letterElement.textContent = welcomeText[index];
            letterElement.style.opacity = 1;
            resolve();
        }, 800);
    });
}

async function revealWelcomeText() {
    for (let i = 0; i < welcomeText.length; i++) {
        await revealWelcomeLetter(i);
    }
}

c) Başlat Düğmesi

Düğme tıklandığında yavaşça kaybolur ve ardından Matrix animasyonu başlar. Bir süre sonra “Hoşgeldiniz” mesajı görünür.

const startButton = document.getElementById('startButton');

startButton.addEventListener('click', () => {
    startButton.style.opacity = 1;
    const fadeOut = setInterval(() => {
        startButton.style.opacity -= 0.05;
        if (startButton.style.opacity <= 0) {
            clearInterval(fadeOut);
            startButton.style.display = 'none';
            setInterval(draw, 50);
            setTimeout(() => {
                revealWelcomeText();
            }, 5000);
        }
    }, 50);
});

Efekti Özelleştirme

Aşağıdaki parametreleri değiştirerek efekti kendinize göre uyarlayabilirsiniz:

  • Yazı Boyutu: Daha büyük veya küçük metinler için fontSize ayarını değiştirin.
  • Animasyon Hızı: setInterval(draw, 50) içindeki zamanlama değerini değiştirin.
  • Hoşgeldiniz Metni: “HOŞGELDİNİZ” yerine istediğiniz metni ekleyin.

Sonuç

Yalnızca birkaç satır kod ile web siteniz için büyüleyici bir Matrix tarzı animasyon oluşturabilirsiniz. Bu proje, HTML5 Canvas ile JavaScript ve CSS’in gücünü bir araya getirerek etkileyici görsel deneyimler sunmanın yollarını gösteriyor. Kodu kendi projenize göre özelleştirmekten çekinmeyin ve yaratıcı versiyonlarınızı paylaşmayı unutmayın!

Kategoriler:

Javascript, Kod Rehberi, Kodlama,