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

<script language="javascript">
miban = new oBandera('ESTA FRASE ONDEA AL VIENTO', 20, 5, 100, 15, 10, 20);
miban.tipo("Arial", "bold", 16, "blue");
miban.ondear('miban');
< /script>

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

  Bajar archivos de la aplicación
Bajarlo
Verlo en funcionamiento
Verlo
 
Envía esta página a un amigo. Te lo agradecerá.   Poner esta página como página de inicio