Some javascript, CSS and HTML make this cool effect for a webpage.

Demo

https://kreider.io/matrix/

Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title></title>
<style>
* {
margin: 0;
padding: 0;
}

body {
background: black;
}

canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
var a = document.getElementById("c")
, c = a.getContext("2d");
a.height = window.innerHeight;
a.width = window.innerWidth;
var d = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789~!@#$%^&*()";
d = d.split("");
for (var e = a.width / 10, f = [], g = 0; g < e; g++)
f[g] = 1;
setInterval(function() {
c.fillStyle = "rgba(0, 0, 0, 0.05)";
c.fillRect(0, 0, a.width, a.height);
c.fillStyle = "#0F0";
c.font = "10px arial";
for (var b = 0; b < f.length; b++)
c.fillText(d[Math.floor(Math.random() * d.length)], 10 * b, 10 * f[b]),
10 * f[b] > a.height && .975 < Math.random() && (f[b] = 0),
.675 < Math.random() && f[b]++
}, 33);
</script>
</body>
</html>
Visited 2 times, 1 visit(s) today