Agréganos a tus favoritos

Add to Google

Add to My Yahoo!

Código de mensaje con efecto Matrix

Búsqueda personalizada

Con este código podrás agregar a tu sitio, blog o espacio Web donde un mensaje de texto con efecto de Matrix.

Ejemplo:

Código:

Este script debe ir entre las tags <head> y </head> de tú página:

<script language="javascript" type="text/javascript">
// EFECTO MATRIX
//
// Version 2
// Repeticion ciclica del efecto (configurable)
// Uso de maysuculas o minusculas (configurable)
//
//Este script y otros muchos pueden
//descargarse on-line de forma gratuita
//en: www.buscate.com.mx


//mensajes
//OJO: tantos caracteres como tiene el mensaje final
var mensaje = 'adfahajurhaldfjhakfdfadfaetradfadfanvuebozmanrñ'
var mensaje_final = 'Texto del mensaje'
//letra a partir de la que empieza a cambiar
var posicion_inicial = 0
//numero de letras antes del cambio y tiempo entre cada cambio
var cambio = 2
var temporizador = 125
//periodo de repeticion del efecto en milisegundos (a 0, no se repite)
var repeticion = 2000
//mayusculas o minusculas (a 0, usa mayusculas)
var minusculas = 1

//variables logica
var x
var control = 0
var posicion = posicion_inicial
var letra, numero

//colores letras
var color_brillante = '#80FF80'
var color_oscuro = '#009700'

//escribe mensaje
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 )
}


//cambia letra de identificador id_letra
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++
}

//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)
}




</script>

 

Código:

Es necesario añadir el siguiente código a la página, entre <body> y </body>:

<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>

En las partes del código que mostramos en color rojo corresponden a los valores que puedes cambiar.

© Copyright 2008 ESH OnLine