Bu yazıda, Matrix filmindeki yazı akışına benzer şekilde, HTML ve JavaScript kullanarak
rastgele kelimelerin sayfanın rastgele yerlerinde harf harf belirdiği bir animasyon efekti oluşturacağız.
Her kelime, Japonca benzeri karakterlerle başlar ve gerçek haline dönüşerek kaybolur.

<script>
    const matrixChars = "アイウエオカキクケコサシスセソタチツテトナニヌネノバビブベボ0123456789#$%&@";
    const words = ["Laravel", "Symfony", "Backend", "Cyberpunk", "Vue", "Blade", "Token", "Middleware", "API", "Seeder"];

    function randomChar() {
      return matrixChars[Math.floor(Math.random() * matrixChars.length)];
    }

    function matrixTypeEffect(word, container) {
      const div = document.createElement('div');
      div.classList.add('word');
      div.style.left = Math.random() * (container.offsetWidth - word.length * 12) + 'px';
      div.style.top = Math.random() * (container.offsetHeight - 20) + 'px';
      container.appendChild(div);

      let index = 0;
      const interval = setInterval(() => {
        let temp = '';
        for (let i = 0; i < word.length; i++) {
          temp += i < index ? word[i] : randomChar();
        }
        div.textContent = temp;
        index++;
        if (index > word.length) {
          clearInterval(interval);
          setTimeout(() => div.remove(), 800);
        }
      }, 50);
    }

    setInterval(() => {
      const count = Math.floor(Math.random() * 10) + 1;
      for (let i = 0; i < count; i++) {
        const word = words[Math.floor(Math.random() * words.length)];
        matrixTypeEffect(word, document.getElementById('matrixDemo'));
      }
    }, 1500);
  </script>

Bu efekt; splash sayfalar, loading ekranları veya portföy siteleri için dikkat çekici bir görünüm sağlar.
Script'i doğrudan HTML sayfanızın sonuna ekleyebilir, istediğiniz kelimeleri özelleştirebilirsiniz.
örnek stil kodları.

<style>
    body {
      font-family: Arial, sans-serif;
      line-height: 1.7;
      background: #121212;
      color: #eee;
      padding: 2rem;
      max-width: 900px;
      margin: auto;
    }
    h1, h2 {
      color: #00ff00;
    }
    pre {
      background: #000;
      color: #00ff00;
      padding: 1rem;
      overflow-x: auto;
    }
    .demo-container {
      position: relative;
      background: black;
      height: 300px;
      border: 1px solid #333;
      overflow: hidden;
      margin-bottom: 2rem;
    }
    .word {
      position: absolute;
      color: #00ff00;
      font-size: 1rem;
      white-space: nowrap;
      pointer-events: none;
      user-select: none;
    }
  </style>