Texto en movimiento HTML

Los ejemplos de texto en movimiento usando HTML mostrados en esta publicación han sido creados usando la etiqueta marquee. 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.

Ejemplos de texto en movimiento HTML

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".

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

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

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

Mensaje que se desplaza de derecha a Izquierda.

En el siguiente 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.

<!-- Ejemplo 2 de Tecneofito -->
<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 texto se deslizara de derecha a izquierda y cada vez que llegue al final. comenzara de nuevo en un bucle infinito.

Mensaje que se desplaza de izquierda a derecha

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.

<!-- Ejemplo 3 de Tecneofito -->
<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>

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

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".

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

El texto se desplazara hacia arriba de forma continua.

Desplazamiento del texto hacia abajo

Esto se logra usando las etiquetas behavior=»scroll»y direction=»down».

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

El texto se desplazara hacia abajo de forma continua.

Ralentizar Texto – De izquierda a derecha

El desplazamiento del texto se ralentiza. Esto se hace agregando scrolldelay=»400″.

<!– Ejemplo 6 de Tecneofito –>
<marquee behavior="scroll" direction="right" scrolldelay="400">El texto pasara lentamente por la pantalla</marquee>

El texto pasara lentamente por la pantalla

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.

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

el texto avanza con más rapidez por la pantalla

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").

<!– Ejemplo 8 de Tecneofito –>
<marquee behavior="alternate" direction="left">El texto permanece en la pantalla y rebota en los lados</marquee>

El texto permanece en la pantalla y rebota en los lados

Rebote acelerado

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

<!– Ejemplo 9 de Tecneofito –>
<marquee behavior="alternate" direction="left" scrollamount="100">El texto rebotara en la pantalla aceleradamente</marquee>

El texto rebotara en la pantalla aceleradamente

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.

<!– Ejemplo 10 de Tecneofito –>
<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>

Mis redes sociales favoritas…

Instagram Facebook Twitter Pinterest Tinder

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.

<!– Ejemplo 11 de Tecneofito –>
<marquee behavior="scroll" direction="right"><marquee behavior="scroll" direction="up">Texto en diagonal!</marquee></marquee>

Texto en diagonal!

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).

<!– Ejemplo 12 de Tecneofito –>
<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.

<!– Ejemplo 13 de Tecneofito –>
<marquee bgcolor = yellow > Cambiar color de fondo del texto en movimieto </marquee>
<marquee bgcolor = green > Mediante el atributo bgcolor</marquee>

Cambiar color de fondo del texto en movimieto Mediante el atributo bgcolor

Imagen en movimiento

Aquí hay un ejemplo de una imagen de desplazamiento. Todo lo que hicimos fue colocar un código de imagen HTML entre las etiquetas <><marquee></marquee><>.

<!– Ejemplo 14 de Tecneofito –>
<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.