Skip to content

Instantly share code, notes, and snippets.

@windviki

windviki/static_matrix.html

Created June 4, 2019 09:06
Show Gist options
  • Save windviki/51ee8f4d67224c9dd640a3a2eadf73ec to your computer and use it in GitHub Desktop.
Save windviki/51ee8f4d67224c9dd640a3a2eadf73ec to your computer and use it in GitHub Desktop.
Download ZIP
Raw
static_matrix.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
<style type="text/css">
*{ padding: 0; margin: 0;}
/*body {background: #000;}*/
canvas {display: block;}
div {text-align: center;}
.center_d {margin:0 auto;width:800px;top:300;position:relative;}
</style>
<title>Aoshuo Information Technology</title>
</head>
<body>
<canvas id="c" style="z-index:1;position:absolute;">
</canvas>
<div class="center_d" style="z-index:2;">
<h1 style="color:#0088FF;">Welcome to Aoshuo Information Technology</h1>
<br/>
<a href="redmine/" style="color:#0088FF;">>> redmine</a>
</div>
<script language="JavaScript">
//[email protected]
var c = document.getElementById("c");
var ctx = c.getContext("2d");
c.height = window.innerHeight;
c.width = window.innerWidth;
//var txts = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var txts = "0123456789";
txts = txts.split("");
var font_size = 16;
var columns = c.width/font_size;
var drops = [];
for(var x = 0; x < columns; x++)
drops[x] = 1;
function draw()
{
ctx.fillStyle = "rgba(240, 240, 240, 0.05)";
ctx.fillRect(0, 0, c.width, c.height);
ctx.fillStyle = "rgba(102, 184, 255, 0.6)";
ctx.font = font_size + "px arial";
for(var i = 0; i < drops.length; i++)
{
var text = txts[Math.floor(Math.random()*txts.length)];
ctx.fillText(text, i*font_size, drops[i]*font_size);
if(drops[i]*font_size > c.height || Math.random() > 0.90)
drops[i] = 0;
drops[i]++;
}
}
setInterval(draw, 55);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment