Efecto-Matrix-CSS-JS

efecto-matrix-css-js.markdown

Efecto-Matrix-CSS-JS

A Pen by DMS on CodePen.

License.

index.html

<canvas id="canvas"></canvas>

script.js

const canvas = document.getElementById('canvas');
const ctx= canvas.getContext('2d');

canvas.width = document.body.offsetWidth;

const w=canvas.width;
const h=canvas.height;

ctx.fillStyle='#000';
ctx.fillRect(0,0,w,h);

const cols =  Math.floor(w/20)+1;
const position_y = Array(cols).fill(0);

function matrix(){
//   Capa de la letra
  ctx.fillStyle ='#0001';
  ctx.fillRect(0,0,w,h);
  
//   Estilos de los caracteres
  ctx.fillStyle = 'yellow';
  ctx.font = '8pt Papyrus';
  
//   Se obtiene la posicion de cada columna y un indice 
  position_y.forEach((y,index)=>{
    const text= String.fromCharCode(Math.random()*128);
    const x= index*20;
    ctx.fillText(text,x,y);
    if(y>100+Math.random()*10000){
      position_y[index]= 0;
    }else{
      position_y[index]= y+20;
    }
  })
}

setInterval(matrix,80);

style.css

canvas{
  width: 100%;
  height: 100%;
}