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;

TAMBIÉN TE INTERESA

enfermedades-oculares

begIA, una app que permite identificar enfermedades oculares que causan ceguera

En este post vamos a hablar de begIA, un app que ha sido desarrollada por estudiantes universitarios que permite identificar con un selfie enfermedades del ojo que podrían causar ceguera. Un proyecto más de salud digital en el que la inteligencia artificial resuelve en segundos un diagnóstico importante para las personas. La app begIA desarrollada por

Bitdefender-lanza-App-Anomaly-Detection-para-móviles-Android

Bitdefender lanza App Anomaly Detection para móviles Android

Bitdefender ha lanzado App Anomaly Detection para los usuarios que tengan una licencia de Bitdefender Mobile Security para Android. Se trata de una nueva función que no tiene coste adicional y solo hay que actualizar esta aplicación para que aparezca de forma automática esta herramienta. Es una app de Android, con lo cual basta con

El navegador Vivaldi: una alternativa para sibaritas

El navegador Vivaldi es una de las opciones menos conocidas para los internautas, pero no por ello poco atractiva. Este browser puede conquistar a mucha gente por estética y su capacidad de personalización. Está disponible para Linux, macOS y Windows. Déjate caer por sus tentáculos y aprovecha todas las funciones que te resumimos a continuación.

desconexión-digital

8 medidas para tomarse una desconexión digital segura en verano

Mientras los expertos en psicología remiendan aplicar una desconexión digital en el periodo de vacaciones para despejar la mente de la rutina, otras voces del entorno digital sugieren estar pendientes de la tecnología sólo para evitar cibertimos o estafas llegadas desde el ecosistema virtual. Existen constantemente amenazas y ciberestafas en la web, pero durante los