javascript - poner - texto animado html

¿Por qué está obsoleto<marquee> y cuál es la mejor alternativa?

Question

Más tiempo tengo curiosidad por la etiqueta HTML <marquee> .

Usted puede encontrar en la especificación MDN :

Obsoleto Esta característica es obsoleta. Aunque todavía puede funcionar en algunos navegadores, se desaconseja su uso, ya que podría eliminarse en cualquier momento. Intenta evitar usarlo.

o en el wiki del W3C :

No realmente. no lo uses

Busqué en varios artículos y encontré alguna mención sobre el reemplazo relevante de CSS. Atributos de CSS como:

marquee-play-count
marquee-direction
marquee-speed

Pero parece que no funcionan. Eran parte de la especificación en el año 2008 , pero fueron excluidos en el año 2014

Una forma, propuesta por W3 Consortium, es mediante el uso de animaciones CSS3 , pero me parece mucho más complicado que <marquee> fácil de mantener.

También hay muchas alternativas de JS , con un montón de código fuente que puede agregar a sus proyectos y hacerlos más grandes.

Siempre estoy leyendo cosas como: "nunca uses marquee", "está obsoleto". Y no entiendo por qué.

Entonces, ¿alguien puede explicarme, por qué la marquesina está en desuso, por qué es tan "peligroso" usarla y cuál es la sustitución más fácil ?

Encontré un example , se ve bien. Cuando utiliza todos los prefijos necesarios para una buena compatibilidad con el navegador, tiene alrededor de 20-25 líneas de CSS, con 2 valores codificados (inicio y parada de sangría), según la longitud del texto. Esta solución no es tan flexible, y con esto no se puede crear un efecto de principio a fin.

Answer 1

Como se dijo antes: la sustitución más fácil es la animación CSS

A todos los críticos de la carpa:

Es una herramienta muy útil para la interfaz de usuario, la uso solo al pasar el mouse para mostrar más información en un espacio limitado.

El ejemplo para el reproductor de mp3 es excelente, incluso mi radio de coche está usando el efecto para mostrar la canción actual.

Así que no hay nada de malo en eso, mi opinión ...

Answer 2

He creado una secuencia de comandos jQuery que reemplazará la etiqueta de marquee antigua con div estándar. El código también analizará los atributos de marquee como direction , scrolldelay y scrollamount . En realidad, el código puede omitir la parte jQuery, pero me sentí demasiado perezoso para hacerlo, y la parte JS de vainilla es en realidad una solución que modifiqué de @Stano responde desde here

Aquí está el código:

jQuery(function ($) {

    if ($(''marquee'').length == 0) {
        return;
    }

    $(''marquee'').each(function () {

        let direction = $(this).attr(''direction'');
        let scrollamount = $(this).attr(''scrollamount'');
        let scrolldelay = $(this).attr(''scrolldelay'');

        let newMarquee = $(''<div class="new-marquee"></div>'');
        $(newMarquee).html($(this).html());
        $(newMarquee).attr(''direction'',direction);
        $(newMarquee).attr(''scrollamount'',scrollamount);
        $(newMarquee).attr(''scrolldelay'',scrolldelay);
        $(newMarquee).css(''white-space'', ''nowrap'');

        let wrapper = $(''<div style="overflow:hidden"></div>'').append(newMarquee);
        $(this).replaceWith(wrapper);

    });

    function start_marquee() {

        let marqueeElements = document.getElementsByClassName(''new-marquee'');
        let marqueLen = marqueeElements.length
        for (let k = 0; k < marqueLen; k++) {


            let space = ''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'';
            let marqueeEl = marqueeElements[k];

            let direction = marqueeEl.getAttribute(''direction'');
            let scrolldelay = marqueeEl.getAttribute(''scrolldelay'') * 100;
            let scrollamount = marqueeEl.getAttribute(''scrollamount'');

            let marqueeText = marqueeEl.innerHTML;

            marqueeEl.innerHTML = marqueeText + space;
            marqueeEl.style.position = ''absolute''; 

            let width = (marqueeEl.clientWidth + 1);
            let i = (direction == ''rigth'') ? width : 0;
            let step = (scrollamount !== undefined) ? parseInt(scrollamount) : 3;

            marqueeEl.style.position = '''';
            marqueeEl.innerHTML = marqueeText + space + marqueeText + space;



            let x = setInterval( function () {

                if ( direction.toLowerCase() == ''left'') {

                    i = i < width ? i + step : 1;
                    marqueeEl.style.marginLeft = -i + ''px'';

                } else {

                    i = i > -width ? i - step : width;
                    marqueeEl.style.marginLeft = -i + ''px'';

                }

            }, scrolldelay);

        }
    }

    start_marquee ();
});

Y aquí hay un codepen trabajo codepen

Answer 3

No creo que debas mover el contenido, pero eso no responde a tu pregunta ... Echa un vistazo a la CSS:

.marquee {
    width: 450px;
    line-height: 50px;
    background-color: red;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}
.marquee p {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 15s linear infinite;
}
@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

Aquí está el codepen .

Editar :

Aquí está el codepen abajo a arriba.

Answer 4

No es TAN difícil: solo tiene que definir la clase y la animación de bucle adjunto una vez en CSS y usarla después en cualquier lugar que necesite. Pero, como mucha gente dijo, es una práctica un poco molesta, y no hay razón, por qué esta etiqueta se está volviendo obsoleta.

Mira esto:

<style style="text/css">
.example1 {
  height: 50px; 
  overflow: hidden;
  position: relative;
}
.example1 h3 {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    line-height: 50px;
    text-align: center;

    /* Starting position */
       -moz-transform:translateX(100%);
       -webkit-transform:translateX(100%);  
       transform:translateX(100%);

 /* Apply animation to this element */  
       -moz-animation: example1 15s linear infinite;
       -webkit-animation: example1 15s linear infinite;
       animation: example1 15s linear infinite;
}

/* Move it (define the animation) */
      @-moz-keyframes example1 {
       0%   { -moz-transform: translateX(100%); }
       100% { -moz-transform: translateX(-100%); }
      }
      @-webkit-keyframes example1 {
       0%   { -webkit-transform: translateX(100%); }
       100% { -webkit-transform: translateX(-100%); }
      }
      @keyframes example1 {
       0%   { 
       -moz-transform: translateX(100%); /* Firefox bug fix */
       -webkit-transform: translateX(100%); /* Firefox bug fix */
       transform: translateX(100%);         
       }
       100% { 
       -moz-transform: translateX(-100%); /* Firefox bug fix */
       -webkit-transform: translateX(-100%); /* Firefox bug fix */
       transform: translateX(-100%); 
       }
      }
</style>

<div class="example1">
   <h3>Scrolling text... </h3>
</div>

Answer 5

Sé que esto fue respondido hace un par de años, pero encontré esto al inspeccionar this . Cuando inspeccioné, encontré esto.

@keyframes scroll {
    from {
        transform: translate(0,0)
    }

    to {
       transform: translate(-300px,0)
    }
}

.resultMarquee {
    animation: scroll 7s linear 0s infinite;
    position: absolute
}

Answer 6

<marquee> nunca formó parte de ninguna especificación HTML y lo que vinculas es una especificación CSS, por lo que es difícil desaprobar algo que nunca se incluyó. HTML es sobre la estructura de un documento, no su presentación. Por lo tanto, tener un elemento auto-animado como parte de HTML no cumple con esos objetivos. La animación está en CSS.