Почему <marquee> устарел и что является лучшей альтернативой?

Ответ 1

Я не думаю, что вы должны перемещать контент, но это не отвечает на ваш вопрос... Взгляните на 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); }
}

Вот codepen.

Edit

Ниже представлен снизу codepen.

Ответ 2

Вам просто нужно определить класс и прикрепленную циклическую анимацию один раз в 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%); 
       }
      }
    

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

Ответ 3

Как указано выше: самая простая подстановка - это CSS-анимация

Для всех критиков шатра:

Это очень полезный инструмент для пользовательского интерфейса, Я использую его только при наведении, для отображения дополнительной информации в ограниченном пространстве.

Пример для mp3-плеера превосходный, даже мое автомобильное радио использует эффект, чтобы показать текущую песню.

Так что ничего плохого в этом, мое мнение...

Ответ 4

<marquee> никогда не был частью какой-либо спецификации HTML, а ссылка, на которую вы ссылаетесь, является спецификацией CSS, поэтому трудно осудить то, что никогда не включалось. HTML - это структура документа, а не его представление. Таким образом, наличие самоанимированного элемента как части HTML не соответствует этим целям. Анимация в CSS.

Ответ 5

Я знаю, что на это ответили пару лет назад, но я нашел это при проверке этого. Когда я осмотрел, я нашел это.

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

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

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

Ответ 6

Я создал скрипт jQuery, который заменит старый тэг marquee стандартным div. Код будет также анализировать marquee атрибуты, как direction, scrolldelay и scrollamount. На самом деле код может пропустить часть jQuery, но я чувствовал себя слишком ленивым, и ванильная часть JS на самом деле является решением, которое я изменил с @Stano, и ответьте отсюда

Вот код:

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 ();
});

А вот и рабочий кодекс

Ответ 7

Я не думаю, что кто-то действительно ответил на вопрос о том, почему вы не должны использовать шатер и почему люди ненавидят это, лол.