Marquee es un efecto que se usa para desplazar parte del contenido de un elemento HTML horizontal o verticalmente. El contenido puede ser algo así como texto o una imagen.
| Propiedad | Descripción | Opciones | CSS |
|---|---|---|---|
| marquee-style | Establece el estilo del contenido en movimiento. | scroll | slide | alternate | 3 |
| marquee-direction | Establece la dirección del contenido en movimiento. | forward | reverse | 3 |
| marquee-play-count | Establece cuántas veces se mueve el contenido. | 3 | |
| marquee-speed | Establece qué tan rápido se desplaza el contenido. | 3 |
Mientras se usa la marquesina, a veces el contenido en movimiento de un elemento no puede ajustarse dentro del elemento. En ese caso, la overflow propiedad se usa para ocultar el contenido desbordado. Además, la overflow-style propiedad se puede usar para mostrar el contenido como un recuadro al tomar uno de los dos valores: marquee-line (crea carpas horizontales) y marquee-block (crea carpas verticales).
La propiedad marquee-style se usa para diseñar un recuadro (contenido en movimiento). Se puede usar para desplazarse, deslizarse o rebotar el contenido.
marquee-style: scroll|slide|alternate|initial|inherit;
| Valor | Descripción |
|---|---|
| scroll | Desplaza el contenido de un extremo del elemento del que forma parte al otro extremo. Después de que desaparece del otro lado, nuevamente comienza a desplazarse. Este es el valor predeterminado. |
| slide | Esto se desliza en el contenido desde un extremo del elemento del que forma parte y luego deja de deslizarse una vez que todo el contenido ha aparecido. |
| alternate | El contenido se desplaza de un extremo a otro y luego rebota de un lado a otro. |
| initial | Establece el valor predeterminado. |
| inherit | Hereda el valor del elemento padre. |
El texto se mueve hacia atras
#m1 {
overflow-x: -webkit-marquee;
-webkit-marquee-style: scroll;
}
#m2 {
overflow-x: -webkit-marquee;
-webkit-marquee-style: alternate;
}
La propiedad marquee-direction se usa para especificar la dirección de un recuadro (contenido en movimiento).
marquee-direction: forward|reverse|initial|inherit;
| Valor | Descripción |
|---|---|
| forward | Desplaza el contenido hacia adelante, es decir, de derecha a izquierda. |
| reverse | Desplaza el contenido en la dirección inversa, es decir, de izquierda a derecha. |
| initial | Establece el valor predeterminado. |
| inherit | Hereda el valor del elemento padre. |
Soporte Para obtener soporte de los navegadores basados en Webkit, debe agregar el prefijo -webkit- antes de la propiedad. Los valores prefijados pueden ser algo diferentes de los enumerados anteriormente.
| Valor | Descripción |
|---|---|
| auto | Esto mueve el contenido en la dirección predeterminada. Este es el valor default. |
| forwards | Esto desplaza el contenido de izquierda a derecha. Este es el reverso de la dirección de la marquesina: reversa |
| backwards | Esto desplaza el contenido de derecha a izquierda. Este es el reverso de la dirección de la marquesina: hacia adelante. |
| up | Esto desplaza el contenido de abajo hacia arriba. |
| right | Esto desplaza el contenido de izquierda a derecha. |
| down | Esto desplaza el contenido de arriba a abajo. |
| left | Esto desplaza el contenido de derecha a izquierda. |
El texto se mueve hacia atras
#m1{
overflow-x: marquee-line;
marquee-style: scroll;
marquee-direction: backward;
}
| Valor | Descripción |
|---|---|
Permite vincular el progreso de una animación CSS nativa directamente al desplazamiento (scroll) del usuario, ya sea en toda la página (scroll()) o cuando un elemento entra en el campo de visión (view()). Reemplaza bibliotecas pesadas de JavaScript como GSAP para efectos básicos de scroll.