Önceki matrix efekti yazımda aynı sistemi C ile yazmıştım. Buradan ulaşabilirsiniz. Bu ise Javascript ile yazıldı. Sitelerinizin header ve ya footer kısmına bunu gömebilirsiniz. Güzel bir görsele sahip. Daha fazla geliştirmek isteyenler içinde kodlar aşağıdaki gibidir.
Canlı site görüntüsü için:
http://kodblogum.com/consol/matrix/
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>Grayscale</title> <style> *{ margin: 0; padding: 0; } canvas{ display: block; } body{ background: black; } </style> </head> <body> <html> <body> <canvas id="gray"></canvas> </body> </html> <script src="js.js"></script> </body> </html> |
Javascript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
window.onload = grayscale; function grayscale(){ var c = document.getElementById("gray"); c.height = window.innerHeight; c.width = window.innerWidth; var birsifir=12; var columnas=c.width/birsifir; var Text="0"; Text=Text.split(""); var Text2="1"; Text2=Text2.split(""); var degisken1=[]; for(var i=0; i<columnas;i++){ degisken1[i]=1; } context= c.getContext('2d'); function gr(){ context.fillStyle="rgba(0,0,0,0.05)"; context.fillRect(0,0,c.width,c.height); context.fillStyle= "#0f0"; context.font= birsifir+"px arial"; for(var i=0;i<degisken1.length;i++){ text=Text; text2=Text2; if(i%2==1){context.fillText(text,i*birsifir, degisken1[i]*birsifir); }else{ context.fillText(text2,i*birsifir, degisken1[i]*birsifir); } if(degisken1[i]*birsifir > c.height && Math.random()>0.975){ degisken1[i]=0; } degisken1[i]++; } } setInterval(gr,120); } |