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

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

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

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

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

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

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

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

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

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

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

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

<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 анимации можно добиться перемещения текста или изображений в нужном направлении, задать дополнительные свойства для получения эффекта движения.

Оцените статью
Добавить комментарий

  1. yurij

    Очень вовремя!
    А как запустить баннеры при наведение на которые курсором последние останавливались и давали ссылку на сайт или блог???

    Ответить
  2. Аноним

    Очень рада, Юрий, что вам понравилось сообщение. Баннер при помощи бегущей строки можно сделать следующим образом: нужно создать код, который будет состоять из обычного кода бегущей строки (выделено в скриншоте желтым); кода, отвечающего за остановку строки при наведении на нее курсора (выделено зеленым) и собственно самих ссылок на сообщения (отмечено красным). Скрин можете постмотреть по ссылке http://r-img.fotki.yandex.ru/get/6001/i-nat2010.f/0_42fc8_519a665e_orig&quot;

    Скопировать код можете отсюда:
    <marquee width=100 height=100 direction="down"
    bgcolor=#FFFF55 behavior="scroll" scrollamount="2" scrolldelay="9"
    style="border: 2px solid #D4FFAA" align=center
    onmouseover=this.stop() onmouseout=this.start()>
    <a href="URL сообщения 1">название ссылки 1</a><br/>
    <a href="URL сообщения 2">название ссылки 2</a><br/>
    <a href="URL сообщения 3">название ссылки 3</a><br/>
    ...<a href="URL сообщения N">название ссылки N</a>
    </marquee>

    Ответить
  3. yurij

    Natalka СПАСИБО!!!

    Ответить
  4. Аноним

    Пожалуйста!)))

    Ответить
  5. yurij

    Natalka добрый вечер! Опять нуждаюсь в вашей помощи. Сделал по вашей рекомендации крутилку баннеров, но там появляется красная полоса (фон крутилки). Можно ли его как-то убрать или сделать чтобы он не показывался? И сделать так, чтобы баннер останавливался на насколько секунд в окошке как у BlogUpp.

    Ответить
  6. yurij

    Да еще, как вы сделали что комментарии публикуются сразу в блоге без "одобрения" ? Забыл, крутилку баннеров делал на
    http://fishinform.blogspot.com/

    Ответить
  7. Аноним

    Юрий, это можно сделать в настройках комментариев. Там есть такой пункт "Ввод комментариев", который и означает их модерацию, т.е. если у вас активирован пункт Всегда, то модерация будет. Отмена модерации - активированный пункт Никогда. Только для сообщений старше N дн. - это промежуточный вариант.

    Ответить
  8. Аноним

    P.S. Интересный у вас получился вариант с баннерами. Я иногда встречаю такое на сайтах. Главное - экономит место.

    Ответить
  9. Анонимный

    а есть ли возможность сделать строку сплошной. Ну обычно выглядит так картинка например
    1...2...3____пробел____1...2...3

    хочется что бы было 1...2...3...1...2...3 без разделения

    Ответить
  10. Аноним

    С помощью кодов html такое сделать не удастся, существуют специальные скрипты для этого. Однако, вариантом выхода является составление очень длинной бегущей строки.

    Ответить