Crear contenido desplazable en HTML5 y CSS3 sin MARQUEE

Aquellos de ustedes que han estado escribiendo HTML durante mucho tiempo pueden recordar el elemento. Este fue un elemento específico del navegador que creó una pancarta de texto desplazable por la pantalla.

Aquellos de ustedes que han estado escribiendo HTML durante mucho tiempo pueden recordar el elemento. Este fue un elemento específico del navegador que creó una pancarta de texto desplazable por la pantalla. Este elemento nunca se agregó a la especificación HTML y su compatibilidad varía ampliamente entre los navegadores. La gente a menudo tenía opiniones muy fuertes sobre el uso de este elemento, tanto positivas como negativas. Pero si lo amaba o lo odiaba, sirvió para hacer visible el contenido que desbordaba los límites de la caja.

Parte de la razón por la que nunca fue implementado completamente por los navegadores, aparte de una fuerte opinión personal, fue porque se considera un efecto visual y, como tal, no debería definirse por el HTML, que define la estructura. En cambio, los efectos visuales o de presentación deben ser gestionados por CSS. Y CSS3 agrega el módulo de marco para controlar cómo los navegadores agregan el efecto de marco a los elementos.

Nuevas propiedades CSS3

CSS3 agrega cinco nuevas propiedades para ayudar a controlar cómo se muestra su contenido en la marquesina: estilo de desbordamiento, estilo de marquesina, conteo de reproducción de marquesina, dirección de marquesina y velocidad de marquesina.

estilo de desbordamiento
La propiedad de estilo de desbordamiento (que también discutimos en el artículo Desbordamiento CSS) define el estilo preferido para los contenidos que desbordan el cuadro de contenido. Si establece el valor en marquee-line o marquee-block, su contenido se deslizará hacia adentro y hacia afuera hacia la izquierda/derecha (marquee-line) o hacia arriba/abajo (marquee-block).

estilo de marquesina
Esta propiedad define cómo se moverá el contenido a la vista (y fuera). Las opciones son desplazamiento, diapositiva y alternativa. El desplazamiento comienza con el contenido completamente fuera de la pantalla, y luego se mueve a través del área visible hasta que esté completamente fuera de la pantalla nuevamente. La diapositiva comienza con el contenido completamente fuera de la pantalla y luego se mueve hasta que el contenido se haya movido completamente en la pantalla y no quede más contenido para deslizar en la pantalla. Por último, alternativo rebota el contenido de lado a lado, deslizándose hacia adelante y hacia atrás.

marquee-play-count
Uno de los inconvenientes de usar el elemento MARQUEE es que el recuadro nunca se detiene. Pero con la propiedad de estilo marquee-play-count puedes configurar la marquesina para rotar el contenido dentro y fuera por un número específico de veces.

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

Detalles de dirección de marquesina

estilo de desbordamiento
Dirección de lenguaje
adelante
marcha atrás
marquee-line marquee-block
ltr left derecha
rtl derecha left
arriba abajo

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

Soporte del navegador de las propiedades de la marquesina

Es posible que deba usar prefijos de proveedor para que los elementos de la marquesina CSS funcionen. Son los siguientes:

CSS3
Prefijo de vendedor
overflow-x: marquee-line; overflow-x: -webkit-marquee;
marquee-style -webkit-marquee-style
marquee-play-count -webkit-marquee-repetition
dirección de marquesina: adelante | atrás; -webkit-marquee-direction: adelante | atrás;
marquee-speed -webkit-marquee-speed
sin equivalente -webkit-marquee-increment

La última propiedad le permite definir qué tan grandes o pequeños deben ser los pasos a medida que el contenido se desplaza en la pantalla en la marquesina.

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

 {
ancho: 200px; altura: 50 px; espacio en blanco: ahora;
desbordamiento: oculto;
desbordamiento-x: -webkit-marquee;
-webkit-marquee-direction: forwards;
-webkit-marquee-style : desplazamiento;
-webkit-marquee-speed: normal;
-webkit-marquee-increment: small;
-webkit-marquee-repetition: 5;
overflow-x: marquee-line;
marquee-direction: forward;
marquee-style: scroll;
marquee-speed: normal;
marquee-play-count: 5;
}

Rate article
labsfabs.com
Add a comment