Тег marquee — это нестандартный элемент HTML , который автоматически прокручивает текст вверх, вниз, влево или вправо. Тег был впервые представлен в ранних версиях Microsoft Internet Explorer и сравнивался с элементом Blink Netscape как фирменное нестандартное расширение стандарта HTML с проблемами удобства использования. W3C не рекомендует использовать его в документах HTML.
Бегущая строка может отвлекать. [1] Человеческий глаз привлекает движение, [2] а текст в бегущей строке постоянно движется.
Как и в случае с элементом мерцания , изображения или текст, помеченные тегом marquee, не всегда полностью видны на визуализируемых страницах, что делает печать таких страниц неэффективной (если не невозможной) задачей; обычно требуется несколько попыток, чтобы захватить весь текст, который может отображаться там, где сообщения прокручиваются или мигают. Версия behavior="alternate"marquee заставляет текст дрожать вперед и назад, но не закрывает никакую его часть, если ширина прокрутки установлена правильно.
Поскольку текст бегущей строки движется, на ссылки внутри него сложнее нажимать, чем на те, что находятся в статическом тексте, в зависимости от скорости и длины прокрутки. Пользователи получают только один шанс каждый раз, когда он прокручивается. Кроме того, слишком быстрая прокрутка текста может сделать его нечитаемым для некоторых людей, особенно для людей с нарушениями зрения. Это может легко разочаровать пользователей. Чтобы бороться с этим, клиентские скрипты позволяют программировать бегущие строки на остановку, когда над ними находится мышь.
В отличие от своего мигающего аналога, элемент «бегущая строка» имеет несколько атрибутов , которые можно использовать для управления и настройки внешнего вида бегущей строки.
alignbehaviorЦиклы подсчитываются каждый раз, когда он достигает каждого конца бегущей строки; цикл 1 отличается от атрибута «Скольжение». Когда элемент прокручивается с атрибутом «Скольжение», элемент навсегда остановится в конце длины бегущей строки, отображая весь элемент. Однако, когда элемент прокручивается без атрибута «Цикл», количество прокруток будет повторяться в соответствии с тем, какому числу равен «Цикл». Если «Цикл = 1», то элемент прокрутится только один раз и полностью выйдет за пределы бегущей строки, в то время как прокручиваемый элемент остановится так же, как «Скольжение». По умолчанию «Цикл = бесконечность», поэтому не нужно кодировать атрибут «Цикл», если вы хотите непрерывную прокрутку. Примечание: «Цикл» будет игнорироваться, если закодирован атрибут «Поведение». Кроме того, если «Поведение=Альтернативное» и «Цикл=2», то элемент будет перемещаться от начала бегущей строки до конца и обратно в начало, считая круговой обход за 2 цикла.
bgcolordirectiondirection=leftТаким образом, перемещает текст справа налево на экране.widthloopscrollamountscrolldelayЭлемент marquee может содержать произвольный HTML-код, поэтому в дополнение к тексту он может перемещать одно или несколько изображений, видеороликов или анимированных GIF-файлов .
Тег marquee устарел в большинстве браузеров, но то же самое поведение все еще можно реализовать с помощью каскадных таблиц стилей , например так:
@ ключевые кадры выделение { 0 % { преобразование : translateX ( 100 % ); } 100 % { преобразование : translateX ( -100 % ); }}. шатер-контейнер { пробел : nowrap ; переполнение : скрыто ; положение : относительное ; анимация : бегущая строка 10 с линейная бесконечная ; }. marquee-content { дисплей : встроенный-блочный ; }Анимация, marquee, определяется как @keyframesпростой перевод справа налево; можно было бы обратить анимацию, инвертировав ее (например, с -100% до 100%). 10sТакже можно изменить ее вывод.
Затем стиль можно вызвать в HTML:
< div class = "marquee-container" >< div class = "marquee-content" > Эти чертовы гуси в аренде! </ div ></ div >Эти чертовы гуси в аренде!
Элемент marquee был впервые изобретен для Microsoft Internet Explorer и поддерживается им. Веб-браузеры Firefox , Chrome и Safari поддерживают его для совместимости с устаревшими страницами. Элемент не соответствует HTML . Свойства CSS были предложены для достижения того же эффекта, который указан в модуле Marquee Module Level 3, который был заброшен без реализации в 2014 году. [3] Подобных эффектов можно также достичь с помощью JavaScript , [4] или анимации CSS3 . [5]