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

monitores-Samsung-M8

Samsung M8: un monitor que es también smart tv y mucho más…

Hay quien usa tres monitores a la vez para trabajar. El segmento de los monitores de PC avanza rápidamente. Hace solo unos años la tendencia era adquirir monitores curvos, pero hoy la dinámica vuelve al llano y, por supuesto, a la extrema delgadez. No obstante, Samsung va más allá con su nuevo monitor Samsung M8.

Huawei-P50-Pro

Las mejores aplicaciones para disfrutar el nuevo Huawei P50 Pro

Huawei ha anunciado los nuevos smartphones Huawei P50 Pro y P50 Pocket, las últimas incorporaciones a su icónica línea de productos de la Serie P. Con cada lanzamiento de la Serie P, la marca china sigue mostrando toda su capacidad innovadora ya sea a nivel de rendimiento y especificaciones de los terminales como por todo

Poly-Sync-10

Poly lanza un nuevo altavoz inteligente para el trabajo híbrido: Sync 10

Poly ha anunciado recientemente el lanzamiento del Poly Sync 10, la última incorporación a su conocida familia de altavoces inteligentes y manos libres, Poly Sync. El nuevo dispositivo responde a las necesidades emergentes de empresas y profesionales, que tienen que desenvolverse de forma eficiente en un contexto de trabajo cada vez más híbrido, flexible y

CCleaner 2022

Novedades importantes con la herramienta CCleaner

Hoy vamos a hablar de CCleaner, una herramienta que cuenta con cientos de millones de usuarios domésticos y empresariales en todo el mundo que trabaja para optimizar el rendimiento de los equipos, mejorar la seguridad de los mismos y prolongar la vida útil de los ordenadores.   CCleaner es el rey del mantenimiento en lo

resistencia-Cat-phones

Cat phones, una década brillando con los dispositivos más resistentes

Hay marcas que huyen del mainstream y son casos de éxito. Cat phones es una de esas compañías que se ha alejado de lo convencional para centrarse en otras necesidades y convertirse así en grandes expertos en la resistencia de sus dispositivos. De la mano de Bullitt Group, la firma celebra 10 años de trayectoria