Efectos tipo Matrix con Javascript

En este artículo voy a explicarles como realizar una serie de efectos Matrix, ejemplarizando, caracterizando y utilizando Javascript.

El punto es sencillo, se trata de dar o enfocar un estilo tipo matrix que puedes utilizar para una web o blog realizado a base de colores como el Negro y el amarillo o alguna temática de seguridad informática etc...

Efecto 1

Este efecto genera un texto, juntando así las letras desde una lluvia de caracteres.

Explicación

Lo primero que vamos a hacer es simple, con un simple código CSS: Ahora el código Javascript que proporcionará la generación de caracteres, el color de fondo por defecto negro, y todo lo demás:

<!--
var rows=11; 
var speed=60; 
var reveal=3; 
var effectalign="default"

Modificación: pueden modificar el tamaño del recuadro con el efecto y la rapidez en estas líneas: var rows=11; var speed=60; Recordando que en el var speed mientras menos sea el número indicado más rápido será, osea que si cambiamos el 60 por 40 ira más rapido.

Y por último no necesitaremos más que solamente un div para generar el efecto:

Obviamente en dónde dice onsoni.blogspot.com, será el mensaje que se ira completando a medida del tiempo, basta con cambiarlo por el que gustes.

Nos quedaría algo como lo siguiente: Ejemplo Efecto 1

onsoni.blogspot.com

Efecto 2

Este, al igual que el primero, se encarga de generar un cierto texto/mensaje, siendo generado así por un efecto tipo matrix con caracteres y letras.

No vamos a necesitar de ningún código CSS para que funcione, solamente Javascript.

Explicación

Para generar los caracteres y el mensaje:

NOTA: tantos caracteres como tiene el mensaje final.

letra a partir de la que empieza a cambiar: Número de letras antes del cambio y tiempo entre cada cambio: Periodo de repetición del efecto en milisegundos (a 0, no se repite): Mayúsculas o minúsculas (a 0, usa mayúsculas): Variables lógica: Colores letras: Escribe mensaje: Cambia letra de identificador id_letra: Recorre array del mensaje:

for (x = posicion; x < mensaje_final.length; x++) {
 
  //obtiene numero aleatorio
  numero = Math.random() 
   
  // letras mayusculas: 65 a 90
  // letras minusculas: 97 a 122
  if ( minusculas == 0 ) numero = 65 + numero * (90 - 65)  //mayusculas
  else numero = 97 + numero * (122 - 97)    //minusculas
  numero = Math.round(numero)  //redondeo a entero
  letra = unescape('%' + numero.toString(16))
  
  cambia_letra( 'letra' + x, letra, color_oscuro )
 }
 
 if ( posicion < mensaje_final.length) {
  setTimeout( "cambia_mensaje()", temporizador )
  control++
 } else {
  if ( repeticion > 0 ) setTimeout( "inicializa_mensaje()", repeticion )
 }
}

function inicializa_mensaje() {
 //recorre array del mensaje
 for (x = 0; x < mensaje_final.length; x++) {
  cambia_letra( 'letra' + x, mensaje[x], color_oscuro )
 }

control = 0
 posicion = 0
 cambia_mensaje()
}

window.onload = cambia_mensaje;
if (document.captureEvents) {            //N4 requiere invocar la funcion captureEvents
   document.captureEvents(Event.LOAD)
}

Para generar el efecto sería con el siguiente código: Ahora por ultimo debemos darle el estilo al background y la fuente: Juntando todos los elementos, obtendremos el código completo:

function ver_mensaje() {
 var x
 var codigo = ''
 
 //recorre array del mensaje
 for (x = 0; x < mensaje.length; x++) {
  codigo += '<span id="letra' + x + '">' + mensaje[x] + '</span>'
 }

document.write( codigo )
}

function cambia_letra( id_letra, nueva_letra, color ) {
 if (document.getElementById && document.createElement) {
  contenedor_letra = document.getElementById( id_letra ).firstChild
  contenedor_letra.nodeValue = nueva_letra
  letra = document.getElementById( id_letra )
  letra.style.color = color
 }
}

function cambia_mensaje( ) {
 
 //controla fijacion nueva letra cada n=cambio bucles
 if ( control > cambio ) {
  control = 0
  cambia_letra( 'letra' + posicion, mensaje_final.charAt(posicion), color_brillante )
  posicion++
 }
 
 for (x = posicion; x < mensaje_final.length; x++) {
 
  //obtiene numero aleatorio
  numero = Math.random() 
   
  // letras mayusculas: 65 a 90
  // letras minusculas: 97 a 122
  if ( minusculas == 0 ) numero = 65 + numero * (90 - 65)  //mayusculas
  else numero = 97 + numero * (122 - 97)    //minusculas
  numero = Math.round(numero)  //redondeo a entero
  letra = unescape('%' + numero.toString(16))
  
  cambia_letra( 'letra' + x, letra, color_oscuro )
 }
 
 if ( posicion < mensaje_final.length) {
  setTimeout( "cambia_mensaje()", temporizador )
  control++
 } else {
  if ( repeticion > 0 ) setTimeout( "inicializa_mensaje()", repeticion )
 }
}

function inicializa_mensaje() {
 //recorre array del mensaje
 for (x = 0; x < mensaje_final.length; x++) {
  cambia_letra( 'letra' + x, mensaje[x], color_oscuro )
 }

control = 0
 posicion = 0
 cambia_mensaje()
}

window.onload = cambia_mensaje;
if (document.captureEvents) {            //N4 requiere invocar la funcion captureEvents
   document.captureEvents(Event.LOAD)
}
</script>
<p style="font-family: Courier; font-weight: 800; background-color: #000000; border-style: solid; border-width: 4px; border-color: #000000; text-align: center;">
<script language="javascript" type="text/javascript">ver_mensaje();</script>
</p>

Y ya esta, aca no dejaré ejemplo por que el Javascript interfiere con el ejemplo del efecto 1, para saciar la curiosidad de ver, bastaría con implementarlo y ya.

Efecto 3 - página completa

Este efecto se encarga de mostrar el efecto tipo matrix por toda la página de manera completa.

Explicación

Lo primero que vamos a que hacer, es definir la estructura en HTML. Después tendríamos que llenar los estilos (<style></style>). Bien, tomaremos en cuenta el body y las cadenas. El fondo del body tendría que ser negro, mientras que el texto será verde, o bien los que tu quieras ponerle. Lo demás que nos queda es explicar e insertar el código. Todo va dentro de <script></script>. Primeramente tenemos 3 variables que son esenciales para el funcionamiento de nuestro efecto matrix: Como ya sabes, la idea es que los caracteres no sean reptitivos, para esto vamos a crear una función que genere cadenas aleatorias. No le metí tanta complejidad, nada más lo hice para letras mayúsculas, tu podrías hacerlo más complejo si así lo deseas. Cuando se cree la cadena, o cuando esta complete su ciclo de desplazamiento vertical, se tendrán que definir o renovar su posición, velocidad y variante del color verde (más obscuro o más brillante). También vamos a hacer una función que haga esto. Para que lo anterior sea posible, tenemos que poner en el plano cada una de las cadenas. Esto lo haremos al cargar la página (window en javascript). Hasta este punto, nada más hemos generado y posicionado las cadenas. Si te das cuenta, estamos llamando a la función animar, y este precisamente esta la que hace el trabajo del desplazamiento vertical de las cadenas; pues vamos a verla. Uniendo todos los elementos, obtendríamos el código completo:

<!DOCTYPE html>
<html>
<head>
<style>
 body
 {
  background: #000;
  overflow: hidden; /* Evita la barra de desplazamiento */
  line-height: 15px; /* Acorta la distancia vertical de caracteres */
  font-size: 14px;
 }
 div.cadena
 {
  position: absolute; /* Para poder posicionar en 'x' y 'y' */
  color: #0f0;
  text-align: center;
  width: 10px; /* Forza los caracteres a irse a otra línea */
  overflow: visible; /* Para que la cadena no se coma los carateres */
  font-family: 'Courier New'; /* Fuente más o menos ad hoc a matrix */
 }
</style>
<script>
 // Cuántas cadenas se van a mostrar al mismo tiempo
 var NUMERO_CADENAS   = 70;
 // Cuántos caracteres contendrá cada cadena
 var TAMANO_CADENA    = 25;
 // Máxima cantidad de píxeles que una cadena puede
 // recorrer en cada ciclo de la animación.
 var VELOCIDAD_MAXIMA = 100;
 // Aquí se almacenarán todas las cadenas existentes
 var cadenas = new Array(NUMERO_CADENAS);
 
 window.onload = function()
 {  
  // Crear 'n' número de cadenas basado
  // en la variable NUMERO_CADENAS.
  for( var i = 0; i < NUMERO_CADENAS; i++ )
  {
   var divCadena = document.createElement('div');
   // Ponerle la clase tomada desde la hoja de estilos
   divCadena.className = 'cadena';
   // Aplicar la cadena aleatoria al objeto
   divCadena.innerHTML = generarCadenaAleatoria();
   
   // Lo agregamos al arreglo principal de cadenas
   cadenas[i] = divCadena;
   
   // Y finalmente al "plano de gráficos"
   document.body.appendChild( cadenas[i] );
   
   // Posicionar el elemento
   prepararCadena(divCadena);
  }
  
  // Iniciar la animación
  animar();
 }
 
 function animar()
 {
  var c;
  for( var i = 0; i < cadenas.length; i++ )
  {
   c = cadenas[i];
   
   // Incrementamos la posición vertical de
   // acuerdo a la velocida de la cadena.
   c.style.top = (c.offsetTop + c.velocidad) + 'px';
   
   // Al final de cada movimiento, verificamos si
   // la cadena se fue más abajo de lo alto del body,
   // si es así, volvemos a definir sus posiciones.
   if( c.offsetTop > window.innerHeight )
    prepararCadena(c);
  }
  
  // Repetir el proceso
  setTimeout('animar();', 50);
 }
 
 function prepararCadena(cad)
 {
  // La velocidad será un número aleatorio, tomando
  // como límite el valor de VELOCIDAD_MAXIMA.
  // Le vamos a sumar 1 al resultado, de esta manera
  // evitamos que la velocidad sea 0.
  cad.velocidad = Math.round( Math.random() * VELOCIDAD_MAXIMA ) + 1;
  
  // El color puede ser una variante de verde, para eso
  // utilizamos un tipo de color RGB (según el estándar CSS),
  // solo cambiando el G por un número aleatorio, tomando
  // como máximo el 255 (no se puede más).
  cad.style.color = 'rgb(0,'+( Math.round(Math.random()*255) )+',0)';
  
  // Aquí simplemente definimos la posición horizontal
  // sin pasar del límite de tamaño de la página.
  cad.style.left = Math.round(Math.random() * document.body.offsetWidth) + 'px';
  
  // Y colocamos la cadena antes del píxel 0, así no
  // la podremos en primaria instancia.
  cad.style.top  = (-cad.offsetHeight) + 'px';
 }
 
 function generarCadenaAleatoria()
 {
  var strCadena = '';
  var intLetra  =  0;
  for( var i = 0; i < TAMANO_CADENA; i++ )
  {
   // Calcular un código ASCII aleatorio.
   intLetra = Math.round(Math.random() * 27) + 65;
   // Convertir el código ASCII a caracter de cadena.
   strCadena += String.fromCharCode(intLetra) + ' ';
  }
  
  return strCadena;
 }
 
</script>
</head>
<body>
</body>
</html>

Nos quedaría algo como lo siguiente: Ejemplo Efecto 3

Y eso es todo, Estos códigos son compatibles con Firefox, Safari, Opera, Chrome e IE8...

Efectos tipo Matrix con Javascript

Efecto 1

Efecto 2

Efecto 3 - página completa

Discussion