Selamat malam, kali ini saya akan membagigan Cara Membuat Efek Matrix Background Menggunakan HTML dan Javascript.
Biasanya kalian menggunakan background matrix pada blog atau HTML page menggunakan Image, nah kali ini saya akan berbagi Membuat Efek Matrix Background Menggunakan HTML dan Javascript
Berikut codenya :
<html>
<head>
<style>
*{
margin: 0;
padding: 0;
}
body {background: black;}
canvas {display:block;}
</style>
</head>
<body>
<canvas id="anampedia"></canvas>
<script>
var c = document.getElementById("anampedia");
var ctx = c.getContext("2d");
c.height = window.innerHeight;
c.width = window.innerWidth;
var matrix = "ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%";
matrix = matrix.split("");
var font_size = 10;
var columns = c.width/font_size;
var drops = [];
for(var x = 0; x < columns; x++)
drops[x] = 1;
function draw()
{
ctx.fillStyle = "rgba(0, 0, 0, 0.04)";
ctx.fillRect(0, 0, c.width, c.height);
ctx.fillStyle = "#0F0"; // ubah warna tulisan disini
ctx.font = font_size + "px arial";
for(var i = 0; i < drops.length; i++)
{
var text = matrix[Math.floor(Math.random()*matrix.length)];
ctx.fillText(text, i*font_size, drops[i]*font_size);
if(drops[i]*font_size > c.height && Math.random() > 0.975)
drops[i] = 0;
drops[i]++;
}
}
setInterval(draw, 35);
</script>
</body>
</html>
Copy Kenotepad lalu simpan dengan ekstensi .HTML, dan lihat hasilnya.Oke sekian saja artikel singkat ini, semoga bermanfaat.
0 Response to "Cara Membuat Efek Matrix Background Menggunakan HTML dan Javascript"
Posting Komentar