Никак не соображу, как поставить анимацию фоном для блока div. При этом, поверх должны располагаться различные объекты (текст, картинка, кнопка). Пробовал z-index-ом, но безуспешно. Ко всему прочему, в идеале, хорошо бы вместо цветового тона на фоне в анимации вставить картинку, либо прозрачный фон, чтобы только падающие буквы были.
const s = window.screen;
const w = (q.width = s.width);
const h = (q.height = s.height);
const ctx = q.getContext("2d");
const p = Array(Math.floor(w / 10) + 1).fill(0);
const random = (items) => items[Math.floor(Math.random() * items.length)];
const hex = "0123456789ABCDEF".split("");
setInterval(() => {
ctx.fillStyle = "rgba(0,25,80,.05)";
ctx.fillRect(0, 0, w, h);
ctx.fillStyle = "#143170";
p.map((v, i) => {
ctx.fillText(random(hex), i * 10, v);
p[i] = v >= h || v > 50 + 10000 * Math.random() ? 0 : v + 10;
});
}, 3000 / 30);
<!doctype html>
<html lang="ru">
<body>
<div class="full-slider">
<canvas id="q"></canvas>
<h2>Системный интегратор</h2>
<h4>в сфере информационной безопасности</h4>
<div>
<ul>
<li>Ваша информационная безопасность в нашем приоритете!</li>
<li>Выявим, устраним, обеспечим защиту!</li>
</ul>
</div>
<div>
<ul>
<li>Связь с экспертом</li>
<li><button>Подробнее</button></li>
</ul>
</div>
</div>
<img src="https://vkclub.su/_data/stickers/zuck/sticker_vk_zuck_033.png" width="150">
</body>
</html>