Efecto Matrix en un sitio WEB

Alguna vez deseaste crear el efecto de matrix en tu sitio web. Este post te explicara como puedes hacer eso de una manera muy sencilla. Para ello deberemos dividir el código en partes, en HTML, CSS y JavaScript.

La primer Sección es el código HTML este consta solamente de una etiqueta de tipo canvas coloca esta etiqueta donde quieres que aparezca el efecto de matrix, la etiqueta ocupara de manera automática el 100% del ancho.

Lo siguiente es definir el estilo CSS para nuestro canvas, aqui es donde podemos cambiar el ancho y alto de nuestro elemento canvas, juega con los valores para que observes el resultado

<canvas class="canvasMatrix"></canvas>
<div class="espaciador"></div>

Posteriormente agregaremos el código en JavaScript después del canvas de preferencia al final del documento HTML, para permitir que el navegador dibuje los elementos del DOM en la ventana y nuestro código en JavaScript no tenga problemas en encontrar los elementos.

function getRandomInt(max) {
	return Math.floor(Math.random() * max);
}

function drawMatrix() {
	// Draw a semitransparent black rectangle on top of previous drawing
	ctx.fillStyle = "#0001";
	ctx.fillRect(0, 0, w, h);

	// Set color to green and font to 15pt monospace in the drawing context
	ctx.fillStyle = "#0f0";
	ctx.font = "14pt monospace";

	// for each column put a random character at the end
	ypos.forEach((y, ind) => {
		// generate a random character
		var ascii_code = getRandomInt(100) + 11930;
		const text = String.fromCharCode(ascii_code);

		// x coordinate of the column, y coordinate is already given
		const x = ind * 20;
		// render the character at (x, y)
		ctx.fillText(text, x, y);

		// randomly reset the end of the column if it's at least 100px high
		if (y > 100 + Math.random() * 10000) ypos[ind] = 0;
		// otherwise just move the y coordinate for the column 20px down,
		else ypos[ind] = y + 20;
	});
}

// Get the canvas node and the drawing context
const canvas = document.getElementsByClassName("canvasMatrix")[0];
const ctx = canvas.getContext("2d");

// set the width and height of the canvas
const w = (canvas.width = document.body.offsetWidth);
const h = (canvas.height = document.body.offsetHeight);

// draw a black rectangle of width and height same as that of the canvas
ctx.fillStyle = "#000";
ctx.fillRect(0, 0, w, h);

const cols = Math.floor(w / 20) + 1;
console.log("columnas: ", cols);
const ypos = Array(cols).fill(0);

console.log(ypos);

// render the animation at 20 FPS.
setInterval(drawMatrix, 50);

Ya para finalizar agregamos el CSS de nuestra pagina HTML

* {
	padding: 0px;
	margin: 0px;
}
.espaciador {
	height: 1000px;
}
body {
	overflow: hidden;
}
.canvasMatrix {
	width: 100%;
}

En la parte que se muestra a continuación podemos ver un ejemplo interactivo con CodePen.

See the Pen Matrix Effect - Chinesse Characters by ITM Developers (@itm-developers) on CodePen.

NO olvides dejarme tu comentario, puedes hacerlo de manera anónima, tu opinión es muy importante para nosotros.