Creación de contenido desplazable en HTML5 y CSS3 sin MARQUEE

Creación de contenido desplazable en HTML5 y CSS3 sin MARQUEE

Creación de contenido desplazable en HTML5 y CSS3 sin MARQUEE

VALORACIÓN DEL ARTÍCULO:
5/5


Aquellos de ustedes que han estado escribiendo HTML durante mucho tiempo pueden recordar el elemento. Este era un elemento específico del navegador que creaba un banner de texto desplazándose por la pantalla. Este elemento nunca se agregó a la especificación HTML y el soporte para ello varió ampliamente entre los navegadores. La gente a menudo tenía opiniones muy fuertes sobre el uso de este elemento, tanto positivas como negativas. Pero tanto si lo amaba como si lo odiaba, servía para hacer visible el contenido que rebasaba los límites de la caja.

Parte de la razón por la que nunca fue completamente implementado por los navegadores, aparte de la fuerte opinión personal, fue que se considera un efecto visual y como tal, no debería ser definido por el HTML, que define la estructura. En su lugar, los efectos visuales o de presentación deben ser gestionados por el CSS. Y CSS3 añade el módulo marquesina para controlar cómo los navegadores añaden el efecto marquesina a los elementos.

Nuevas propiedades de CSS3

CSS3 añade cinco nuevas propiedades para ayudar a controlar la forma en que el contenido se muestra en la carpa: estilo de desbordamiento, estilo de carpa, recuento de juego de carpa, dirección de carpa y velocidad de carpa.

overflow-style
La propiedad overflow-style (que también he discutido en el CSS Overflow) define el estilo preferido para los contenidos que desbordan la caja de contenido. Si ajusta el valor a línea de marquesina o bloque de marquesina, el contenido se deslizará hacia la izquierda/derecha (línea de marquesina) o hacia arriba/abajo (bloque de marquesina).

estilo marquesina
Esta propiedad define cómo se moverá el contenido a la vista (y hacia fuera). Las opciones son scroll, slide y alternar. El desplazamiento comienza con el contenido completamente fuera de la pantalla, y luego se desplaza a través del área visible hasta que todo vuelva a estar completamente fuera de la pantalla. La diapositiva comienza con el contenido completamente fuera de la pantalla y luego se desplaza hasta que el contenido se ha movido completamente a la pantalla y no queda más contenido para deslizar en la pantalla. Por último, el contenido rebota de un lado a otro, deslizándose hacia adelante y hacia atrás.

marquee-play-count
Una de las desventajas de utilizar el elemento MARQUEE es que la carpa nunca se detiene. Pero con el estilo marquee-play-count de la propiedad puede configurar la marquesina para que rote el contenido de encendido y apagado para un número específico de veces.

dirección de carpa
También puede elegir la dirección en la que el contenido debe desplazarse por la pantalla. Los valores hacia adelante y hacia atrás se basan en la direccionalidad del texto cuando el estilo de desbordamiento es de línea de marquesina y hacia arriba o hacia abajo cuando el estilo de desbordamiento es de bloque de marquesina.

Detalles de la dirección de la carpa

Overflow-styleLenguaje Dirección hacia adelante-invertir-línea de marqueteríatriadirecta-derechaizquierda-marquetería-bloqueo hacia abajo

velocidad de marquesina
Esta propiedad determina la rapidez con la que el contenido se desplaza por la pantalla. Los valores son lentos, normales y rápidos. La velocidad real depende del contenido y del navegador que lo muestre, pero los valores deben ser lentos, es decir, más lentos de lo normal, que es más lento que rápido.

Soporte del navegador para las propiedades de la carpa

Puede que necesite utilizar prefijos de proveedor para que los elementos de la marquesina CSS funcionen. Son los siguientes:

CSS3Vendor Prefixoverflow-x: marquee-line; overflow-x: -webkit-marquee;marquee-style-webkit-marquee-style-quee-play-count-webkit-marquee-repetitionmarquee-direction: forward|reverse;-webkit-marquee-direction: forward|backwards; marquee-speed-webkit-marquee-speed-marquee-speed-sin-warquee-sin-webkit-marke

La última propiedad le permite definir cuán grandes o pequeños deben ser los pasos a medida que el contenido se desplaza por la pantalla de la carpa.

Para que su carpa funcione, debe colocar primero los valores prefijados del proveedor y luego seguirlos con los valores de especificación CSS3. Por ejemplo, aquí está el CSS de una marquesina que desplaza el texto cinco veces de izquierda a derecha dentro de una caja de 200×50.

{
> anchura: 200px; altura: 50px; espacio en blanco: nowrap;
desbordamiento: oculto;
overflow-x:-webkit-marquee;
-dirección de la carpa: hacia delante;
. -webkit-marquee-style: scroll;
-webkit-marquee-speed: normal;
-webkit-marquee-increment: pequeño;
-…y la repetición de la carpa: 5;
overflow-x: línea de la marquesina;
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>)) dirección de la carpa: hacia adelante;
estilo de marquesina: scroll;
velocidad de la carpa: normal;
marquesina de juego y recuento: 5;

Deja un comentario

TAMBIÉN TE INTERESA

desaparece-el-notch-del-iphone-14-pro

El precio del iPhone 14, motivo clave en la caída de su demanda

Estamos en un momento de inflación disparada y la situación económica de alza de precios está mermando la capacidad de consumo de las familias. Se nota en todo, en el ocio, la cesta de la compra y también la adquisición de tecnología. Además nos encontramos a escasos meses de picos de consumo como el Black

veentajas-del-marketplace

Ventajas de los marketplaces en plena escalada de precios

Si vendes productos por la web, deberías apostar por los marketplaces, aún en un momento de inflación alta, en plena escalada de precios. La economía se encuentra en un momento difícil: agosto cerró con una tasa de inflación superior a los dos dígitos (10,4%) por tercer mes consecutivo. La incertidumbre ante el invierno impulsa a

OPPO-Reno8-5G

Ya a la venta los nuevos teléfonos OPPO Reno8

OPPO Reno8 es una realidad ya en Europa. La marca hizo una presentación en París para dar a conocer los nuevos productos que llegan directamente al mercado para sumar una feroz competencia. Y es que en pocos años en el mercado del viejo continente, OPPO se ha hecho un hueco importante en el consumidor.  

batería-portátil-DELTA-2

Esta batería portátil es top y acaba de salir a la venta

Tener una batería portátil puede darnos mucha versatilidad para nuestras actividades tanto dentro como fuera de casa. Usamos muchos dispositivos a diario y todos ellos requiere de energía eléctrica para trabajar, por lo que una herramienta que nos aporte dicha energía puede venirnos muy bien en caso de apagones o proyectos en el exterior. EcoFlow,

GoPro-HERO11

GoPro HERO11 Black: las nuevas cámaras para los creadores de contenido

La conocida marca de videocámaras GoPro ha lanzando tres nuevas especialmente concebidas para creadores. GoPro HERO11 llega en tres modelos para satisfacer las necesidades de todo tipo de perfiles y creadores de contenidos.   Índice de contenidos1 El sensor de mayor resolución hasta la fecha2 Las tres cámaras GoPro HERO112.1 Principales tecnologías en las tres

camara-motorola-edge-30-ultra

¿200 megapíxeles? Sí, es lo que tiene el nuevo motorola edge 30 ultra

El furor por los megapíxeles parece estar de vuelta en la fotografía de los smartphones, si bien hay expertos que mantienen que más MP no quiere decir que resulte en mejores fotografías. El nuevo motorola edge Ultra llega al mercado con una barbaridad inédita en el mundo de la telefonía. Cabe destacar también que otras