Matrix
unknown
html
a year ago
1.5 kB
8
Indexable
Never
<!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>