Matrix

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<style>
body
{
    background: url(https://www.ambex.lv/projects/matrix/bg.jpg);
    background-size: cover;
    overflow: hidden;
}
#overlay
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0, .7);
}
span
{
    position: absolute;
    z-index: 1;
    color: lightgreen;
    font-size: 20px;
    font-family: monospace;
}
</style>
<script>
var xMax = window.innerWidth / 13;
var yMax = window.innerHeight / 20;
var gCount = 40, g = [];

for (i = 0; i<gCount; i++)
{
    g[i] = {x: Math.random()*xMax, y: Math.random()*yMax};
    
    setInterval("move("+i+")", 20+Math.random()*150);
}

function move(i)
{
    g[i].y++;
    drawChar(g[i].x, g[i].y);
    if (g[i].y>yMax)
    {
        g[i].y=-1;
        g[i].x = Math.random()*xMax;
    }
}

function drawChar(x,y)
{
    var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVXYZ!@#$%^&*()";
    var char = chars.charAt(chars.length*Math.random());
    
    var element = $("<span>"+char+"</span>");
    $('body').append(element);
    $(element).css({top: Math.round(y)*20, left: Math.round(x)*13});
    
    $(element).fadeOut(3000, function(){
        $(this).remove();    
    })
}
$(function(){
    
setInterval(function(){
    drawChar(Math.random()*xMax,Math.random()*yMax);
}, 100)
    
});
</script>
</head>
<body>

<div id='overlay'></div>

</body>
</html>
Editor is loading...