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

Stanislaw Pytel / Getty Images

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 que se desplazaba por la pantalla. Este elemento nunca se añadió a la HTML la especificación y el soporte para él variaron ampliamente entre los navegadores. La gente a menudo tenía opiniones muy fuertes sobre el uso de este elemento, tanto positivas como negativas. Pero ya sea que lo amara o lo odiara, cumplió el propósito de hacer visible el contenido que desbordaba los límites de la caja.

Parte de la razón por la que los navegadores nunca lo implementaron por completo, aparte de una fuerte opinión personal, fue que se considera un efecto visual y, como tal, no debe definirse por el HTML, que define la estructura. En cambio, los efectos visuales o de presentación deben ser administrados por CSS. Y CSS3 agrega el módulo de marquesina para controlar cómo los navegadores agregan el efecto marquesina 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 overflow-style (que también discutimos en el artículo CSS Overflow) define el estilo preferido para los contenidos que desbordan el cuadro de contenido. Si establece el valor en línea de marquesina o bloque de marquesina, su contenido se deslizará hacia adentro y hacia afuera 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 fuera). las opciones son Desplazarse , deslizar y alternar. El desplazamiento comienza con el contenido completamente fuera de la pantalla y luego se mueve por el área visible hasta que vuelve a estar completamente fuera de la pantalla. La diapositiva comienza con el contenido completamente fuera de la pantalla y luego se mueve hasta que el contenido se ha movido completamente a la pantalla y no queda más contenido para deslizar en la pantalla. Por último, la alternativa hace rebotar el contenido de un lado a otro, deslizándose de un lado a otro.

Marquee-play-count
Uno de los inconvenientes de utilizar el elemento MARQUEE es que la marquesina nunca se detiene. Pero con la propiedad de estilo marquee-play-count puede configurar la marquesina para activar y desactivar el contenido una cantidad específica de veces.

marquesina-dirección
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 línea de marquesina y arriba o abajo cuando el estilo de desbordamiento es bloque de marquesina.

Detalles de dirección de marquesina

|_+_|	Dirección de Idiomas	delantero	reverso
|_+_|	litros	izquierda	Correcto
	rtl	Correcto	izquierda
|_+_|		arriba	abajo

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

Compatibilidad del navegador con las propiedades de la marquesina

Es posible que necesite usar prefijos de proveedores para que los elementos de marquesina de CSS funcionen. Son los siguientes:

CSS3	Prefijo de proveedor
|_+_|	|_+_|
|_+_|	|_+_|
|_+_|	|_+_|
|_+_|	|_+_|
|_+_|	|_+_|
no equivalent	|_+_|

La última propiedad le permite definir cuán 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 200x50.

|_+_|