Estaba pensando en qué publicar, y me acordé de algo que hice hace algunos años, era una animación tipo Matrix. No quise publicar ese programa (porque estaba en VB6), preferí rehacerlo en algo más actual: javascript.
Está hecho con HTML, CSS y Javascript.
Lo primero que tendríamos que hacer, es definir la estructura en HTML.
<!DOCTYPE html>
<html>
<head>
<style>
/* Estilos y Colores */
</style>
<script>
// Código Javascript
</script>
</head>
<body>
</body>
</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.
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 */
}
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:
// 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;
Como o ya sabes, el chiste 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.
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;
}
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.
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 ver en primaria instancia.
cad.style.top = (-cad.offsetHeight) + 'px';
}
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).
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 = divCadena;
// Y finalmente al "plano de gráficos"
document.body.appendChild( cadenas );
// Posicionar el elemento
prepararCadena(divCadena);
}
// Iniciar la animación
animar();
}
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.
function animar()
{
var c;
for( var i = 0; i < cadenas.length; i++ )
{
c = cadenas;
// 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);
}
Este código es compatible con Firefox, Safari, Opera, Chrome e IE8.
Si no te quedó claro o crees que salió algo mal, ponme un comentario =)
y si quieres bajar el archivo, aquí te lo pongo.
Está hecho con HTML, CSS y Javascript.
Lo primero que tendríamos que hacer, es definir la estructura en HTML.
<!DOCTYPE html>
<html>
<head>
<style>
/* Estilos y Colores */
</style>
<script>
// Código Javascript
</script>
</head>
<body>
</body>
</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.
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 */
}
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:
// 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;
Como o ya sabes, el chiste 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.
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;
}
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.
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 ver en primaria instancia.
cad.style.top = (-cad.offsetHeight) + 'px';
}
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).
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 = divCadena;
// Y finalmente al "plano de gráficos"
document.body.appendChild( cadenas );
// Posicionar el elemento
prepararCadena(divCadena);
}
// Iniciar la animación
animar();
}
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.
function animar()
{
var c;
for( var i = 0; i < cadenas.length; i++ )
{
c = cadenas;
// 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);
}
Este código es compatible con Firefox, Safari, Opera, Chrome e IE8.
Si no te quedó claro o crees que salió algo mal, ponme un comentario =)
y si quieres bajar el archivo, aquí te lo pongo.