Fuente: https://tecneofito.com/texto-en-movimiento-html/

Los ejemplos de texto en movimiento usando HTML mostrados en esta publicación han sido creados usando la etiquetamarquee. Esta etiqueta se usa para desplazar el texto de izquierda a derecha, de arriba hacia abajo y viceversa. También podemos controlar la velocidad , la dirección, el tiempo de desplazamiento e incluso el inicio de la acción al pasar el ratón sobre el texto.


Texto en movimiento 

Este ejemplo esta en la parte superior de la publicacion por una razón. El texto se deslizara de izquierda a derecha y luego se detendrá. Al estar en la parte superior de la página, hay una mayor probabilidad de que se vea el texto deslizandose. Si lo hubiera colocado lineas más abajo, lo más seguro es que no visualice la acción (debido a que el usuario tendría que desplazarse hacia abajo, en cuyo caso el texto probablemente haya terminado la acción).

Por lo tanto, si no ve el texto deslizándose aquí, actualice la página; es probable que el texto ya haya realizado la acción y no pudo notarlo.

Este ejemplo muestra al texto deslizándose de izquierda a derecha y luego se detiene. No realiza una acción continua.  Esto se logra mediante el uso de la etiqueta behavior="slide".


 El texto se deslizara de derecha a izquierda y luego se detendrá.

<marquee behavior="slide" direction="left">El texto se deslizara de derecha a izquierda y luego se detendrá.</marquee>

 

Texto con movimiento continuo 

Este ejemplo seguramente lo ha visto en muchos sitios que tienden a utilizar el desplazamiento continuo para expresar un mensaje. Es decir, el texto se desplazara continuamente y cada vez que llega al final, comenzara de nuevo en un bucle infinito.

te ejemplo mostraremos un mensaje que se desplaza de derecha a izquierda. Aunque este movimiento tiende a ser el predeterminado, usted puede modificar la dirección del mensaje cambiando a direction="right"en el código HTML.


El texto se deslizara de derecha a izquierda y cada vez que llegue al final. comenzara de nuevo en un bucle infinito. 

<marquee behavior="scroll" direction="left">El texto se deslizara de derecha a izquierda y cada vez que llegue al final. comenzara de nuevo en un bucle infinito.</marquee> 


El siguiente cuadro mostrara el mismo ejemplo, pero esta vez el texto se desplazara de Izquierda a derecha cambiando la etiqueta direction="left" por direction="right" en el código html.


El texto se deslizara de izquierda a derecha y cada vez que llegue al final. comenzara de nuevo en un bucle infinito.

<marquee behavior="scroll" direction="right">El texto se deslizara de izquierda a derecha y cada vez que llegue al final. comenzara de nuevo en un bucle infinito.</marquee> 

 

Desplazamiento del texto hacia arriba:En el siguiente ejemplo el texto se desplaza hacia arriba. Esto se logra usando las siguientes etiquetas behavior="scroll"y direction="up".


 El texto se desplazara hacia arriba de forma continua. 

<marquee behavior="scroll" direction="up">El texto se desplazara hacia arriba de forma continua.</marquee> 


Desplazamiento del texto hacia abajo: Esto se logra usando las etiquetas behavior=”scroll”y direction=”down”.


 El texto se desplazara hacia abajo de forma continua. Mientras mayor es el número más lento avanza. 

<marquee behavior="scroll" direction="down">El texto se desplazara hacia abajo de forma continua.</marquee>  


Ralentizar Texto – De izquierda a derecha: el desplazamiento del texto se ralentiza. Esto se hace agregando scrolldelay=”400″.


 El texto pasara lentamente por la pantalla 

<marquee behavior="scroll" direction="right" scrolldelay="400">El texto pasara lentamente por la pantalla</marquee> 


Texto rápido de izquierda a derecha: El desplazamiento del texto es más rapido. Igual que en el ejemplo anterior, pero esta vez le agregamos scrollamount="10"para acelerar el texto.


El texto avanza con más rapidez por la pantalla 

<marquee behavior="scroll" direction="right" scrolldelay="600" scrollamount="100">el texto avanza con más rapidez por la pantalla</marquee> 

Texto que rebota Aquí, el texto rebota al llegar al inicio o final de la pantalla. Hacemos esto usando behavior="alternate"(en lugar de behavior="scroll").


 El texto permanece en la pantalla y rebota en los lados 

<marquee behavior="alternate" direction="left">El texto permanece en la pantalla y rebota en los lados</marquee>  


Rebote acelerado: Vamos a acelerar el texto utilizando el atributo scrollamount="100".


El texto rebotara en la pantalla aceleradamente 

<marquee behavior="alternate" direction="left" scrollamount="100">El texto rebotara en la pantalla aceleradamente</marquee> 


Textos a diferentes velocidades: Como se vio anteriormente, puede acelerar o ralentizar el texto utilizando el atributo scrollamount junto con un valor numérico. Aquí, usamos varios valores para establecer las velocidad de los textos.


 Mis redes sociales favoritas...

<p>Mis redes sociales favoritas...</p>

<marquee behavior="scroll" direction="right" scrollamount="10">Instagram</marquee>

<marquee behavior="scroll" direction="right" scrollamount="5">Facebook</marquee>

<marquee behavior="scroll" direction="right" scrollamount="1">Twitter</marquee>

<marquee behavior="scroll" direction="right" scrollamount="20">Pinterest</marquee>

<marquee behavior="scroll" direction="right" scrollamount="100">Tinder</marquee>


Desplazamiento de texto en diagonal: En este ejemplo, añadimos uno etiqueta marquee dentro de otra. La primera etiqueta desplaza el texto a la derecha. La marquee interior la desplaza hacia arriba.

Texto en diagonal!

<marquee behavior="scroll" direction="right"><marquee behavior="scroll" direction="up">Texto en diagonal!</marquee></marquee>

 

Texto en caída : Puedes usar texto desplazable para algunos efectos geniales. Vea este texto que cae (Este código fue generado con Falling Text Generator de Quackit).


 Programador

<div style="position:relative;height:520px;">

<marquee style="z-index:2;position:absolute;left:275px;top:108px;font-family:Impact;font-size:14pt;color:#ffcc00;height:420px;"scrollamount="7" direction="down">Programador</marquee><marquee style="z-index:2;position:absolute;left:89px;top:54px;font-family:Impact;font-size:14pt;color:#ffcc00;height:366px;"scrollamount="2" direction="down">Tecneofito</marquee><marquee style="z-index:2;position:absolute;left:26px;top:72px;font-family:Impact;font-size:14pt;color:#FF8C48;height:358px;"scrollamount="1" direction="down">Blogger</marquee><marquee style="z-index:2;position:absolute;left:3px;top:44px;font-family:Impact;font-size:14pt;color:#ffcc00;height:130px;"scrollamount="3" direction="down">Redes sociales</marquee>

</div>

 

Agregar color de fondo : Con el Attribute Bgcolor puedes agregar color de fondo para destacar más el texto.


Cambiar color de fondo del texto en movimieto

Mediante el atributo bgcolor

<marquee bgcolor = yellow > Cambiar color de fondo del texto en movimieto </marquee>

<marquee bgcolor = green > Mediante el atributo bgcolor</marquee> 

 

Imagen en movimiento

Aquí hay un ejemplo de una imagen en movimiento en este caso he utilizado un GIF. Todo lo que hicimos fue colocar un código de imagen HTML entre las etiquetas <><marquee></marquee><>.

Swimming fish

 <marquee behavior="scroll" direction="left"><img src="https://tecneofito.com/wp-content/uploads/2017/11/fish-swimming.gif" width="94" height="88" alt="Swimming fish" /></marquee> 



Términos básicos

Width sirve para especificar el ancho, el valor puede ser 10 o 10%, etc.

Height Sirve para especificar la altura, el valor puede ser 10 o 10%, etc.

Direction Sirve para especificar la dirección de desplazamiento de la marquesina. El valor puede ser arriba, abajo, izquierda comportamientoa.

Behavior Sirve para especificar el tipo de desplazamiento. El valor puede ser scroll, slide y alternate.

scrolldelay Sirve para disminuir la velocidad de desplazamiento de la marquesina. El valor puede ser 10, 20, etc.

scrollamount Sirve para especificar la velocidad de desplazamiento de la marquesina. El valor puede ser 10, 20, etc.

loop Sirve para especificar cuántas veces se desplazará. El valor puede ser 1,2,3, etc. El valor predeterminado es infinito.

bgcolor Sirve para especificar el color de fondo de la marquesina. El valor puede ser rojo, verde, etc.

vspace Se usa para establecer el espacio vertical entre la marquesina y el contenido superior e inferior.

hspace Se usa para establecer el espacio horizontal entre la marquesina y el contenido antes y después.