Textos en movimiento

Tal como dice el título de esta entrada, veremos un efecto para que el texto se desplaze en la página. Agregarlo en el blog es muy sencillo y se puede usar para agregar un anuncio o para dar la bienvenida al lector, entre otras cosas.

Un ejemplo:

Este texto se encontrará en movimiento

Lo único que hay que hacer es insertar el texto dentro de la etiqueta <marquee>:

<marquee>esto se desplazará...</marquee>

Es posible indicarle al texto en que dirección se moverá y haciendo uso de CSS, podremos modificar el tipo de letra, los colores y demás cosas. Haciendo uso de estos recursos, lograrás que la marquesina quede más llamativa.

Moviendo el texto hacia distinas direcciones

hola, cómo estas

<marquee direction="up">hola, cómo estas. </marquee>

Podremos hacer lo mismo cambiando up por down, right o left.

Agregando algunos estilos al texto

texto de color rojo oscuro con fondo gris...

<marquee style="color: #d10101; background-color:#ccc; font-family: Arial;">texto de color rojo oscuro con fondo gris...</marquee>

Como observan, se puede cambiar el tipo de fuente. Podemos agregar fuentes como Impact, Courier, Arial, Georgia, Helvetica, Verdana, Trebuchet.

Comportamiento del texto

Para conseguir esto vamos a usar al atributo BEHAVIOR. Puede ser slide, que se desplaza y se detiene (sólo funciona con Internet Explorer), scroll, que es el que viene por defecto y alternate, que se mueve de un lado hacia otro.

<marquee behavior="slide, scroll o alternate">texto en movimiento</marquee>

Texto desplazándose con "alternate".

Ahora lo hacemos con "slide".

En este último usamos "scroll".