HTML, CSS ve Javascript ile Matrix Wall Yapımı

Yukarıda videosunu izleyebileceğiniz bu örneğin kodlarına da buradan erişebilirsiniz.

Bu örnekte meşhur Matrix filminde kullanılan akan yeşil yazıları simüle etmeye çalışacağız. DOM olarak HTML tarafında bir element yazmadan tüm elementler javascript ile yönetilecek.

Javascript tarafında kolon ve satır sayılarını hesapladık ve iç içe iki döngü ile elementlerimizi yerleştirmeye başladık. Burada kolon genişliğini 30px vererek hem javascript hem de CSS içinde bu şekilde kullandık. setupColumn fonksiyonu ile her bir kolon için hesaplamaları yapıp rastgele karakterleri ekliyor ve gösteriyoruz. span elementi içine rastgele karakter yazıldıktan sonra animasyonu eklenip kolon elementine (p) ekleniyor. Kolondaki son elementin animasyon bitiş eventinde tekrar setupColumn fonksiyonunu çağırtarak aynı kolonu tekrar farklı gecikme süresi ve karakterlerle başlatıyoruz.

getRandomChar fonksiyonu javascript içindeki String.fromCharCode() fonksiyonunu kullanıyor. Bu fonksiyon 16’lı tabanda (hexadecimal) sayı alarak karşılık gelen UTF-16 karakteri döner. UTF-16 için aralıkları şu adresten görebilirsiniz.

Bir Cevap Yazın