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:
Modificación: pueden modificar el tamaño del recuadro con el efecto y la rapidez en estas líneas: 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: 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: 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: 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...

¿Qué te pareció?

Loading...
Nombre

Adblock Adobe Flash AJAX Algoritmos Anuncios API Blogger Blogging Buscadores chrome web store Código Fuente CSS CSS 3 CV Dart Depurar Desarrollo Web Diseño Diseño Grafico Diseño Web Documentación Efectos Facebook Firefox Foros Fotografias Frances Bean Cobain Gadgets General Geolocalizar Google Google Analytics Google Chrome Google Imágenes Google Music Google Reader Google+ Herramientas Hotmail HTML HTML5 Imágenes Información Informática Instagram Internet Internet Explorer Internet Explorer 10 Javascript jQuery Kurt Cobain Librerías Marketing Microsoft Monetización Web Mozilla Firefox 8 MySQL Navegadores Noticias Optimización Web PageSpeed Insights PayPal Personal Photoshop PHP Plantillas Programación Programas Programas Web Proyectos Redes Sociales ScreensHots Scripts Seguridad SEO Servicios Web Sesiones Snippets SoniTube Spam Steve Jobs Templates Themes Thumbalizr Tips Trucos Tutoriales Twitter Utilidades Vectores Virus Web Widgets Windows 7 Windows 8 Windows Mobile Windows XP WordPress XSS Youtube
false
ltr
item
OnSoni: Efectos tipo Matrix con Javascript
Efectos tipo Matrix con Javascript
http://3.bp.blogspot.com/--CvBkt5Ch1M/T0vRw_ruzeI/AAAAAAAAAhY/0DnY--hJfMg/s1600/Matrix-onsoni.jpg
http://3.bp.blogspot.com/--CvBkt5Ch1M/T0vRw_ruzeI/AAAAAAAAAhY/0DnY--hJfMg/s72-c/Matrix-onsoni.jpg
OnSoni
http://www.onsoni.com/2012/02/efectos-tipo-matrix-con-javascript.html
http://www.onsoni.com/
http://www.onsoni.com/
http://www.onsoni.com/2012/02/efectos-tipo-matrix-con-javascript.html
true
8818836675902573334
UTF-8
Not found any posts Not found any related posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU Etiqueta ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Contents Ver también Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copiar todo el codigo Seleccionar todo el Código Todo el código se ha copiado en el portapapeles Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy