stringtranslate.com

elemento de marquesina

Un vídeo de una marquesina HTML que muestra el texto "Wikipedia".

La etiqueta de marquesina es un elemento HTML no estándar que hace que el texto se desplace hacia arriba, abajo, izquierda o derecha automáticamente. La etiqueta se introdujo por primera vez en las primeras versiones de Internet Explorer de Microsoft y se comparó con el elemento Blink de Netscape , como una extensión propietaria no estándar del estándar HTML con problemas de usabilidad. El W3C desaconseja su uso en documentos HTML.

Problemas de usabilidad

La marquesina puede distraer. [1] El ojo humano se siente atraído por el movimiento, [2] y el texto de marquesina se mueve constantemente.

Al igual que con el elemento parpadeante , las imágenes o el texto etiquetados con marquesinas no siempre son completamente visibles en las páginas renderizadas, lo que hace que imprimir dichas páginas sea una tarea ineficiente (si no imposible); normalmente se requieren varios intentos para capturar todo el texto que podría mostrarse cuando los mensajes se desplazan o parpadean. La behavior="alternate"versión de marquesina hace que el texto se mueva hacia adelante y hacia atrás, pero no oculta ninguna parte si los anchos de desplazamiento se configuran correctamente.

Debido a que el texto de marquesina se mueve, es más difícil hacer clic en los enlaces que contiene que en los de texto estático, dependiendo de la velocidad y la duración del desplazamiento. Los usuarios solo tienen una oportunidad cada vez que pasa. Además, desplazar el texto demasiado rápido puede hacerlo ilegible para algunas personas, especialmente aquellas con discapacidad visual. Esto puede frustrar fácilmente a los usuarios. Para combatir esto, las secuencias de comandos del lado del cliente permiten programar las marquesinas para que se detengan cuando el mouse está sobre ellas.

Atributos

Marquesina

Ejemplo de texto de marquesina (realizado mediante CSS; la etiqueta <marquee> en sí está obsoleta y ya no funciona en la mayoría de los navegadores)

A diferencia de su contraparte parpadeante, el elemento de marquesina tiene varios atributos que se pueden utilizar para controlar y ajustar la apariencia de la marquesina.

Alinear
Utiliza la misma sintaxis que el elemento img .
Comportamiento
Permite al usuario configurar el comportamiento de la marquesina en uno de tres tipos diferentes:
  • Desplazamiento (predeterminado): desplaza el texto de derecha a izquierda y lo reinicia en el lado derecho del marco cuando llega al lado izquierdo. El texto desaparece cuando finaliza el bucle.
  • Diapositiva : cuando se usa en ausencia del atributo 'Comportamiento', el contenido que se desplazará se deslizará a lo largo de toda la marquesina, pero se detendrá en el momento en que llegue al final, para que se muestre el contenido. Pero si se usa con el atributo 'Comportamiento', se ignorará el atributo 'Diapositiva'.

Los bucles se cuentan cada vez que llega a cada extremo de la marquesina; un bucle de 1 es diferente del atributo 'Diapositiva'. Cuando el elemento se desplaza con el atributo 'Diapositiva', el elemento se detendrá permanentemente al final de la marquesina, mostrando el elemento completo. Sin embargo, cuando se desplaza un elemento sin un atributo 'Loop', el número de desplazamientos se repetirá según el número al que sea igual 'Loop'. Si 'Loop=1' entonces el elemento se desplazará solo una vez y saldrá completamente de la longitud del marco, mientras que el elemento que se desplaza se detendrá, sería lo mismo que 'Diapositiva'. De forma predeterminada, 'Loop=infinite', por lo que no es necesario codificar el atributo 'Loop' si desea un desplazamiento continuo. Nota: 'Bucle' se ignorará si se codifica el atributo 'Comportamiento'. Además, si 'Behavior=Alternate' y 'Loop=2' entonces el elemento irá desde el principio de la marquesina hasta el final y volverá al principio, contando un viaje de ida y vuelta como 2 bucles.

  • Alternativo : desplaza el texto de derecha a izquierda y regresa de izquierda a derecha.
colorbg
Establece el color de fondo del marco.
Dirección
Establece la dirección del cuadro de marquesina. Los valores son izquierda, derecha, arriba, abajo donde el valor indica la dirección de viaje. Por lo tanto, Direction=left mueve el texto de derecha a izquierda en la pantalla.
Ancho
Esto establece el ancho que debe tener la marquesina.
Bucle
Esto establece cuántas veces la marquesina debe "repetir" su texto. Cada viaje cuenta como un bucle.
cantidad de desplazamiento
Esta es la cantidad de píxeles que se mueve el texto entre "cuadros". Entonces scrollamount=1 proporciona la velocidad de desplazamiento más lenta.
retraso de desplazamiento
Esto establece la cantidad de tiempo, en milisegundos, entre 'fotogramas', muy parecido a ver una repetición de un vídeo donde cada fotograma del vídeo se pausaría durante x número de milisegundos. 'Scrolldelay=1000' significa una cámara lenta donde cada cuadro dura mil milisegundos o un segundo.

Un elemento de marquesina puede contener HTML arbitrario, por lo que, además de texto, podría mover una o más imágenes, clips de película o GIF animados .

Implementación

La etiqueta de marquesina ha quedado obsoleta en la mayoría de los navegadores, pero aún se puede implementar el mismo comportamiento con hojas de estilo en cascada , como esta:

@ marquesina de fotogramas clave {   0 % {  transformar : traducirX ( 100 % );  } 100 % {  transformar : traducirX ( -100 % );  }}. contenedor de marquesina {  espacio en blanco : nowrap ;  desbordamiento : oculto ;  posición : relativa ;  animación : marquesina 10 s lineal infinita ;    }. contenido de marquesina {  pantalla : bloque en línea ; }

La animación, marquee, se define por @keyframesser una simple traducción de derecha a izquierda; sería posible invertir la animación invirtiéndola (de -100% a 100%, por ejemplo). También se 10spuede modificar para alterar su salida.

Luego se puede invocar el estilo en HTML:

< div  class = "marquee-container" >< div  class = "marquee-content" > ¡Los malditos gansos están en alquiler! </div> </div>
¡Los malditos gansos están en alquiler!

Cumplimiento

El elemento marquesina se inventó por primera vez para Internet Explorer de Microsoft y es compatible con él. Los navegadores web Firefox , Chrome y Safari lo admiten por compatibilidad con páginas heredadas. El elemento es HTML no compatible . Se propusieron propiedades CSS para lograr el mismo efecto especificado en el módulo Marquee Nivel 3, que se abandonó sin implementación en 2014. [3] También se pueden lograr efectos similares mediante el uso de animaciones JavaScript , [4] o CSS3 . [5]

Referencias

  1. ^ "Glosario» marquesina ". Usabilidad primero . Foraker . Consultado el 14 de marzo de 2010 .
  2. ^ Tim Louis Macaluso (27 de mayo de 2009). "Un estudio muestra que los ojos abandonarán las palabras por el movimiento". Periódico de la ciudad de Rochester . Archivado desde el original el 1 de junio de 2009 . Consultado el 14 de marzo de 2010 .
  3. ^ Módulo de marquesina CSS nivel 3
  4. ^ Sharp, Remy (10 de septiembre de 2008). "La marquesina suave como la seda" . Consultado el 20 de julio de 2005 .
  5. ^ liMarquee: complemento jQuery de marquesina alternativo. Crea marquesinas horizontales o verticales para texto, imágenes, productos, pancartas o logotipos.