Introducción al lenguaje JavaScript

Banner de texto con efecto ola

Descripción

Este objeto te permitirá crear frases para banners con un bonito efecto de bandera ondeando al viento, y sin necesidad de recargar tu página con complicados gifs animados. Su uso es muy sencillo, siendo además fácil de modificar para conseguir otros movimientos más a tu gusto.

Como usarlo

Mira el archivo de ejemplo. El código debes colocarlo en la sección HEAD, entre las etiquetas <SCRIPT LANGUAGE="Javascript"> Y </SCRIPT>. Este código lo puedes colocarlo directamente en la página o bien enlazado a un archivo externo usando el familiar método <SCRIPT LANGUAGE="Javascript" SRC="direcdelarchivojs"></SCRIPT>. En cualquier caso, en la página colocas un script que hará lo que sigue

Definir una variable para el banner como un objeto de tipo bandera. Para ello usa como argumentos: Una cadena de texto con la frase que vas a animar Las altura de la ola El desfase entre los movimientos de las letras (comienza con 1/4 de la altura) Rapidez del movimiento Separación entre letras Posición X (izquierda) del comienzo de la frase Posición Y (superior) del comienzo de la frase Colocar el tipo de letra, estilo, tamaño y color para la frase Poner en movimiento el objeto O sea, este script será similar al que sigue

También puedes meter este código en una función y luego llamarla desde la página o desde el evento <body onload=...>. Eso queda a tu elección.

Como funciona

Básicamente lo que hace este objeto ( oBandera) es coger una frase y descomponerla en sus letras, para cada una de las cuales crea un bloque DIV con posicionamiento absoluto. El siguiente paso es colocar cada bloque en su lugar dentro de la página. Luego, mediante un temporizador, se van modificando las posiciones de cada bloque, y por tanto de cada letra.
Para calcular las sucesivas posiciones verticales de cada letra se usa el método sin (seno trigonométrico) del objeto Math, con lo cual se consigue el movimiento vertical como de ola de toda la frase. Si quieres otros movimientos sólo debes cambiar el método ondear( ), por ejemplo podrías ir incrementando la posición horizontal para que la ola además avanzara de izquierda a derecha por la pantalla. El código que se encuentra en el archivo zip está comentado para que puedas entender el funcionamiento de este objeto tan espectacular dada su simpleza.
Aquí es interesante que observes el uso de document.create y document.body.appendChild para crear y añadir elementos a una página web de forma dinámica sin usar el prehistórico y limitado document.write


	Bajarlo	Verlo