I found some code in CodePen.io that produces a "matrix" effect and I want to try to integrate it on my website. This is the code: https://codepen.io/gnsp/pen/vYBQZJm .
What I am trying to do is to use this script as the background for my one-page website: I want this to be shown behind text and image blocks instead of a picture or a color background.
The page builder I am using is GoodLayers and it allows a "code" block which places a block that you can write javascript in which then gets interpreted.
This is the code:
<style> body {
margin: 0;
height: 100vh;
width: 100vw;
} </style>
<div>
<canvas id= "canv" height:window.innerHeight width:window.innerWidth style="z-index=0"> </canvas>
</div>
<script>
const canvas = document.getElementById('canv');
const ctx = canvas.getContext('2d');
const w = canvas.width = document.body.offsetWidth;
const h = canvas.height = document.body.offsetHeight;
const cols = Math.floor(w / 20) + 1;
const ypos = Array(cols).fill(0);
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, w, h);
function matrix () {
ctx.fillStyle = '#0001';
ctx.fillRect(0, 0, w, h);
ctx.fillStyle = '#0f0';
ctx.font = '15pt monospace';
ypos.forEach((y, ind) => {
const text = String.fromCharCode(70,105,68,105) ;
const x = ind * 20;
ctx.fillText(text, x, y);
if (y > 100 + Math.random() * 10000) ypos[ind] = 0;
else ypos[ind] = y + 20;
});
}
setInterval(matrix, 50);
</script>I have placed it inside a section wrapper.
This is how it looks in the backend.
That's how it looks when I scroll down.
I want for it to either move with the viewport or better- to be fixed and just cover the whole page from top to bottom.
I am extremely new to this and hardly ever hardcoded anything in CSS or JS without the use of UI of various page builders so please understand that.
