Encontré un código en CodePen.io que produce un efecto de "matriz" y quiero intentar integrarlo en mi sitio web. Este es el código: https://codepen.io/gnsp/pen/vYBQZJm .
Lo que estoy tratando de hacer es usar este script como fondo para mi sitio web de una página: quiero que esto se muestre detrás de bloques de texto e imágenes en lugar de una imagen o un fondo de color.
El generador de páginas que estoy usando es GoodLayers y permite un bloque de "código" que coloca un bloque en el que puede escribir javascript y luego se interpreta.
Este es el código:
<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>Lo he colocado dentro de un contenedor de sección.
Así es como se ve en el backend.
Y así se ve en el frontend: no centrado y aparece como un bloque que no se superpone con nada.
Así es como se ve cuando me desplazo hacia abajo.
Quiero que se mueva con la ventana gráfica o mejor, que se arregle y cubra toda la página de arriba a abajo.
Soy extremadamente nuevo en esto y casi nunca codifico nada en CSS o JS sin el uso de la interfaz de usuario de varios creadores de páginas, así que comprenda eso.
