JSFiddle - React, Tailwind, and code Playground
CSS
html, body{height:100%}
#matrix{overflow:visible}
JavaScript
//(function () {
// initialisation
var Cols = 4,
Cl = 20,
Cs = 15,
Ts = 14,
Tc = '#008800',
Tc1 = '#00ff00',
MnS = 6,
MxS = 6,
I = Cs,
A,
Sp = new Array(),
S = new Array(),
Y = new Array(),
C = new Array(),
M = new Array(),
B = new Array(),
RC = new Array(),
E = new Array(),
Tcc = new Array(0, 0),
Container = document.createElement("DIV");
Container.id='matrix';
Container.style = 'position:absolute;top:0;right:-' + Cs + 'px';
Container.innerHTML = "<div style='position:relative'>";
for (i = 0; i < Cols; i++) {
S[i] = I += Cs;
Container.innerHTML += "<div class='A' style='position:absolute;top:0;font-family:comic sans ms;font-size:" + Ts + "px;right:" + S[i] + "px;width:" + Ts + "px;height:0px;color:" + Tc + ";visibility:hidden'></div>";
}
Container.innerHTML += "</div>";
document.body.appendChild(Container);
A = document.getElementsByClassName('A');
for (j = 0; j < Cols; j++) {
RC[j] = 1 + Math.round(Math.random() * Cl);
Y[j] = 0;
Sp[j] = Math.round(MnS + Math.random() * MxS);
for (i = 0; i < RC[j]; i++) {
B[i] = '';
C[i] = Math.round(Math.random() * 1) + ' ';
M[j] = B[0] += C[i];
}
};
// boucle d'animation
function Cycle() {
Container.style.top = document.body.scrollTop;
for (i = 0; i < Cols; i++) {
var r = Math.floor(Math.random() * Tcc.length);
E[i] = '<font color=' + Tc1 + '>' + Tcc[r] + '</font>';
Y[i] += Sp[i];
if (Y[i] > document.body.clientHeight) {
for (i2 = 0; i2 < Cols; i2++) {
RC[i2] = 1 + Math.round(Math.random() * Cl);
for (i3 = 0; i3 < RC[i2]; i3++) {
B[i3] = '';
C[i3] = Math.round(Math.random() * 1) + ' ';
...