JSFiddle - React, Tailwind, and code Playground
HTML
<canvas id="q"></canvas>
<div class="apodiv">IMAPO.RU<br/><br/><br/>Самые отборные скрипты</div>
CSS
#q {
position:absolute;
z-index:-1;
top:0px;
left:0px;
}
.apodiv {
width:300px;
height:200px;
margin:30px auto;
padding:30px 10px 10px 10px;
background:rgba(255, 255, 255, 0.8);
border-radius:5px;
text-align:center;
box-sizing:border-box;
}
JavaScript
var width = q.width = $(document).width();
var height = q.height = $(document).height();
var letters = Array(256).join(1).split('');
var draw = function () {
q.getContext('2d').fillStyle = 'rgba(0,0,0,.05)';
q.getContext('2d').fillRect(0, 0, width, height);
q.getContext('2d').fillStyle = '#0e0';
letters.map(function (y_pos, index) {
text = String.fromCharCode(65 + Math.random() * 33);
x_pos = index * 10;
q.getContext('2d').fillText(text, x_pos, y_pos);
letters[index] = (y_pos > 758 + Math.random() * 1e4) ? 0 : y_pos + 10;
});
};
setInterval(draw, 33);