Texto en moviento (marquesinas).

texto en movimiento con html

 

 

Las marquesinas son ventanas en las que se desplaza un texto.

Puede desplazarse hacia la izquierda, derecha, arriba y abajo y en diferentes tiempos ya sea lento o rapido.

 

Ejemplo, la etiqueta basica es:

<marquee> hola, bienvenido </marquee>

 

hola, bienvenido

 El texto por defecto se desplazará a la izquierda(left) para indicarle que se desplaze a la derecha debemos agregarle el atributo  direction al cual le podemos dar como valor right , up o down (derecha,arriba o abajo) segun hacia que direccion lo deseamos.


Ejemplo:

<marquee direction="right"> hola, bienvenido </marquee>


hola, bienvenido

 

Si queremos que se mueva con direccion para arrriba o abajo debemos asignarle una altura y un tiempo adecuado para que permita leer correctamente. Para asignarle una altura debemos agregar el atributo height y width si queremos indicar el ancho, a cada uno de ellos le asignamos un valor marcando solo con numeros y el navegador lo representará en pixeles o en porcentaje desde 0 - 100% y tomara la medida segun sea el tamaño de tu web.

Para controlar el tiempo usamos los atributos scrollamount y scrolldelay.

scrollamount: define la cantidad de desplazamiento en cada movimiento entre mayor sea el valor la velocidad será mas rapida.

scrolldelay: retrasa el tiempo de movimiento del texto, el valor agregado se toma en milisegundos, cuanto mayor sea el valor mas lento avanza.

Y para hacerlo mas especial le agregamos color de fondo con el atributo bgcolor al cual le asignamos un valor hexadecimal, puedes buscar en google colores hexadecimales para conseguir el adecuado para ti.

 

Ejemplo:

<marquee width="100%" height="80" direction="up" scrolldelay="150" bgcolor="#FFBB00"> hola, bienvenido </marquee>

 

hola, bienvenido


Hasta aqui espero ya entiendas un poco como funciona esto.

 

Otro atributo importante es behavior sirve para indicar de que manera se va a efectuar el desplazamiento a este le podemos asignar como valor slide o alternate. el valor slide indica que el texto se desplaza de una lado  y se detiene en el otro y el valor alternate indica que el texto se desplaze de un lado y al llegar al otro lado regrese por el lado contrario dando un efecto de revote.

 

Ejemplo:

<marquee direction="right" behavior="alternate">hola, bienvenido</marquee>


hola, bienvenido

 

Al igual que el texto el mismo codigo actua de la misma manera si colocas el codigo html de una imagen.

 

Ejemlplo:

 <marquee bgcolor="ffffff" direction="right"><img src="http://u.jimdo.com/www17/o/s224fc11c65cbc592/img/i2ea0e60978e750a2/1362614934/thumb/image.gif" alt="imagen"/></marquee>

 

imagen

 

ok, podemos usar codigo javascript para crear nuevas funciones, como ejemplo tomaré de nuevo el codigo anterior que dejamos de color naranja y le asignamos una id con nombre "ejemplo" luego enseguida colocamos dos enlaces los cuales uno le dira al codigo marquee que el texto tenga movimiento de arriba hacia abajo y el otro lo contrario todo esto mediante la id que colocamos..


Ejemplo:

<marquee id="ejemplo" width="100%" height="80" direction="up" scrolldelay="150" bgcolor="#FFBB00">hola, bienvenido</marquee>

<a href="javascript:void(0);" onclick="getElementById('ejemplo').direction='down';">Hacia abajo</a>

-

<a href="javascript:void(0);" onclick="getElementById('ejemplo').direction='up';">Hacia arriba</a>


 

 

hola, bienvenido Hacia abajo- Hacia arriba

 

Y bien ahora si queremos colocar mas palabras en forma de lista despues de cada linea dentro de el codigo marquee agregamos la etiqueta <br> y dela misma forma podemos colocar un enlace con su respectiva etiqueta <a href="url-de-enlace" target="_blank"> notoyontoy</a> pero para que no se dificulte hacer click al enlace ya que va estar en movimiento agregamos los siguientes atributos onmouseout="this.start()" onmouseover="this.stop()"  dentro de el codigo marque indicando que se detenga cuando pases el cursor por encima y continue al quitarlo.

 

 

Ejemplo:

<marquee id="ejemplo2" onmouseout="this.start()" onmouseover="this.stop()" width="100%" height="120" direction="up" scrolldelay="150" bgcolor="#FFBB00">

hola, bienvenido<br>

espero le sea de gran ayuda esta informacion<br>

visiten mi canal de youtube<br>

<a href="https://www.youtube.com/user/QueOnda1211" traget="_blank">notoyontoy</a><br>

saludos<br>

:)

</marquee>

<a href="javascript:void(0);" onclick="getElementById('ejemplo2').direction='down';">Hacia abajo</a>

-

<a href="javascript:void(0);" onclick="getElementById('ejemplo2').direction='up';">Hacia arriba</a>

 

 

hola, bienvenido
espero le sea de gran ayuda esta informacion
visiten mi canal de youtube
notoyontoy
saludos
:)
Hacia abajo - Hacia arriba




Nos vemos en el siguiente articulo de este blog, dejen sus dudas y comentarios aqui abajo y visiten mi canal de youtube.


NOTOYONTOY-YOUTUBE





Escribir comentario

Comentarios: 0