-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
81 lines (72 loc) · 2.8 KB
/
index.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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Matrix like animation</title>
<style type="text/css">
html {
background-color: black;
font-family: monospace;
font-size: 16px;
color: white;
}
.character {
position: fixed;
top: -20px;
}
</style>
</head>
<body>
<div id="characters"></div>
<script type="text/javascript">
/* Initialization */
var containerElement = document.getElementById("characters");
/* Geometry */
var colSpace = 10; /* Space between colons */
/* Intervals */
var insertInterval = 0; /* Time between character inserts */
var fallInterval = 40; /* Time between falls */
var swapInterval = 100; /* Time between character swapps */
/* Fall parameters */
var numberOfSpeeds = 10; /* Total number of speeds */
var minSpeed = 5; /* Minimum number of pixels to fall per frame */
var speedMultiplier = 2; /* Sets gap between speeds */
function genRndChar(){
return String.fromCharCode(Math.round(1000 + Math.random() * 100));
}
function genRndHexGreen(){
return "#00" + (Math.round(16 + Math.random() * 239).toString(16)) + "00";
}
/* Add characters */
setInterval(function(){
/* Generate a random horizontal position for the next character */
var XPosition = Math.round(Math.random() * window.innerWidth);
XPosition = XPosition - XPosition % colSpace; /* TODO improve math */
var divToInsert = document.createElement("div");
divToInsert.setAttribute("class", "character");
divToInsert.dataset.speed = Math.round(Math.random() * numberOfSpeeds);
divToInsert.textContent = genRndChar();
divToInsert.style.left = XPosition + "px";
divToInsert.style.color = genRndHexGreen();
containerElement.appendChild(divToInsert);
}, insertInterval);
/* Move characters downwards */
setInterval(function(){
for (var i = 0; i < containerElement.childNodes.length; i++){
var currentY = parseInt(window.getComputedStyle(containerElement.childNodes[i]).top);
containerElement.childNodes[i].style.top = currentY + parseInt(containerElement.childNodes[i].dataset.speed) * speedMultiplier + minSpeed + "px";
/* Remove if character is invisible */
if (currentY > window.innerHeight){
containerElement.childNodes[i].remove();
}
}
}, fallInterval);
/* Swap characters */
setInterval(function(){
for (var i = 0; i < containerElement.childNodes.length; i++){
containerElement.childNodes[i].textContent = genRndChar();
}
}, swapInterval);
</script>
</body>
</html>