Esto lo puedes hacer desde cualquier procesador de texto, como: Bloc de notas o WordPad, pero si deseas hacerlo un poco mas fácil, puedes usar Dreamweaver con el cual podrás ahorrarte algunas lineas de código.
Para este ejemplo usaremos por ser mas común en cualquier computador, Bloc de notas:
1. Primero abrimos bloc de notas y escribimos lo siguiente (sin dejar espacios en la parte
superior)
<html>
<head>
<tilte>Efecto Matrix</title>
</head>
<body bgcolor="#000000">
---Aquí irán las instrucciones----
</body>
</html>
Aquí indicamos la estructura básica de una pagina web, poniendo el color de la pagina en
negro con la linea: body bgcolor="#000000"
2. Para evitar cualquier accidente, vamos a a guardar de una vez nuestras pagina web,
siguiendo la ruta: Menu archivo/Guardar como
Puedes ponerle el nombre que mas te agrade, de preferencia que sea sin dejar espacios o
uniendo las palabras con un guion bajo ( _ ) y agregándole al final del nombre lo siguiente:
.html (punto html), quedando de esta forma: "nombre_de_la_página.html"
3. Utilizaremos varias imágenes como las que muestro a continuación para crear el efecto de
matrix
Estas imágenes la puedes descargarlas desde esta pagina o puedes crear tus propios diseños desde cualquier programa de diseño e incluso con el accesorio de "Paint". |  |  |  |  |  |
Solo no hagas todas las imágenes de igual tamaño, algunas tienen que ser mas anchas y largas que otras pues con eso conseguiremos el efecto deseado.
Nombra a cada imagen de forma sencilla, en este ejemplo hemos nombrado a las imágenes como: matrix, matrix1, matrix2, matrix3, matrix4 y matrix5 (todas son imagenes "gif", pero puedes utilizar imagenes "jpg" o "png")
3. Entre las etiquetas <body> y </body> agregaremos el siguiente código:
<marquee style="left: 5; position: absolute; top: 0;" scrollDelay=10 scrollAmount=12
direction=down width=10 height=600>
<img src=matrix.gif>
</marquee >
La etiqueta "marquee" genera una elemento en movimiento sea vertical u horizontal.
Repetiremos el código por cada imagen que tengamos, haciendo algunas modificaciones como las siguientes:
- scrollDelay: Indica la velocidad en que moverá la imagen. A menor numeración mayor velocidad.
- scrollAmount: Define la cantidad de pixeles (espacios) que queremos que se desplace la imagen.
- Direction: Define hacia donde será el movimiento, esta propiedad la dejamos como esta, pues todas las imágenes deben tener un movimiento hacia abajo
- Width y height: Ancho y alto respectivamente, de la marquesina, también dejaremos estas propiedades como están.
- img src: Este es una de las propiedades mas importantes de nuestro ejercicio, pues aquí definiremos el nombre de cada una de las imagenes.
4. Guardamos los cambios de nuestra pagina y abrimos, debería quedarte mas o menos ASI
Esperamos que este Tutorial sea de tu interés, si deseas aprender mas te invitamos a tomar nuestro curso "Diseño Web desde cero", donde aprenderás a crear WebSite profesionales y funcionales, da clic AQUI para ver el plan de estudios
Esperamos que este Tutorial sea de tu interés, si deseas aprender mas te invitamos a tomar nuestro curso "Diseño Web desde cero", donde aprenderás a crear WebSite profesionales y funcionales, da clic AQUI para ver el plan de estudios
