Бегущая строка в HTML: коды, тег marquee

Бегущая строка - это движущаяся строка, элемент для привлечения внимания в веб-дизайне. Представляет из себя анимированный движущийся текст, картинки, которые движутся в определенном направлении. Ранее был популярен тег <marquee>, сейчас же он считается устаревшим и не рекомендуется к применению. вместо него лучше применять технологии, основанные на CSS и Javascript. С исторической целью разберем использование тега <marquee>.

Основы использования тега <marquee>

Тег <marquee> создает бегущую строку. Простейший пример:

<marquee>текст бегущей строки</marquee>

текст бегущей строки

Настройка внешнего вида

Цвет фона
Чтобы изменить цвет фона, используйте атрибут bgcolor:

<marquee bgcolor="yellow">текст бегущей строки</marquee>

текст бегущей строки

Движение изображений

Для движения изображения поместите его код между тегами <marquee>:

<marquee><img src="URL_изображения"></marquee>

Направление движения. Направление задается атрибутом direction. Возможные значения: left (по умолчанию), right, up, down.

<marquee direction="right"><img src="АДРЕС КАРТИНКИ В СЕТИ"></marquee>

Изменить скорость движения можно при помощи параметра scrollamount. Чем большее значение он принимает, тем скорость выше:

<marquee scrollamount="30">бегущий текст или код картинки</marquee>

Текст или картинку можно заставить двигаться вверх (up) или вниз (down) при помощи параметра direction и указав высоте (height) движения:

<marquee height="150" direction="up">текст или картинка</marquee>

текст или картинка

Дополнительные параметры тега бегущей строки marquee

Ширина и высота

Атрибуты width и height задают размеры области бегущей строки:

<marquee width="200" height="100">Текст</marquee>

Цвет текста

Цвет текста можно изменить с помощью CSS:

<marquee style="color: red;">Текст</marquee>

Развернутый код бегущей строки

<marquee width="100" height="100" direction="up" bgcolor="#FFFF55" behavior="scroll" scrollamount="2" scrolldelay="9" style="border: 2px solid #D4FFAA;">Бегущая строка</marquee>

Бегущая строка

• marquee – задает собственно саму бегущую строку,
• width – ширина поля, в котором будет бегать текст или картинка,
• height – высота поля бегущей строки,
• style="border:" – определяет параметры внешней границы фона, ее толщину, цвет, вид,
• direction – указывает направление движения (up, down, left, right),
• bgcolor – цвет фона бегущей строки,
• behavior – параметр движения (scroll, slide, alternate),
• scrollamount – расстояние между точками движения,
• scrolldelay – задержка между кадрами,

Если добавить в код бегущей строки onmouseover=this.stop() onmouseout=this.start(), то срока будет останавливать свое движение при наведении на нее курсора. Работает не везде.
loop – показывает сколько раз должна циклов должна сделать бегущая строка.

 Устаревание тега <marquee>

Тег <marquee> не поддерживается в HTML5 и считается устаревшим. Вместо него рекомендуется использовать CSS-анимации или JavaScript. Например, с помощью CSS можно создать аналогичный эффект:

Как создать бегущую строку с помощью анимации CSS

.marquee {
  white-space: nowrap;
  border: 1px solid black;
  width: 450px;
  overflow: hidden;
  position: relative; /* Для корректного позиционирования внутреннего элемента */
  margin: 20px;
}

.marquee span {
  display: inline-block;
  padding-left: 1%; /* Начальное положение текста */
  animation: marquee 20s linear infinite;
}

@keyframes marquee {
  0% { transform: translateX(-100%); } /* Начальное положение: текст полностью слева */
  100% { transform: translateX(100%); } /* Конечное положение: текст полностью справа */
}

 и HTML-код:

<div class="marquee">
  <span>Это текст бегущей строки, который движется слева направо.</span>
</div>

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