Бегущая стока в HTML5

Автор: | 25.09.2019

История тега бегущая строка <marquee>

Бегущая строка на сайте позволяет обратить внимание пользователя на себя, тем самым привлечь к каким то действиям, например покупке или звонку.

Данное внимание позволит организовать ПАРНЫЙ тег <marquee>

Синтаксис довольно прост

Для того что бы бегущая строка была под ваш дизайн нужно задать дополнительные стили. Например:

Атрибуты тега <marquee> бегущая строка

Атрибут Значение Значение по умолчанию
behavior alternate — Контент перемещается между правым и левым краем элемента

scroll — Контент перемещается в направлении, заданным атрибутом direction, затем скрывается за пределами области, после чего начинает движение с начала.

slide — Контент перемещается в направлении, заданным атрибутом direction, доходит до края области и останавливается.

scroll
 bgcolor  white  белый
 direction down — Движение сверху вниз.

left — Движение справа налево.

right — Движение в правую сторону.

up — Движение вверх.

 left
 height  %    px  12px
 hspace и vspace  предназначены для добавления пустого пространства вокруг содержимого <marquee>hspace устанавливает поля слева и справа от элемента (по горизонтали), а vspace — сверху и снизу (по вертикали).  -1
 loop  Устанавливает, сколько раз скролировать содержимое тега <marquee>. После того, как заданное число раз отсчитано, содержимое остается в конечной точке.  -1
 scrollamount  устанавливает расстояние в пикселах между старым и новым положениями, которые влияют на скорость движения и плавность хода(0-10)  6
 scrolldelay  Любое целое положительное число миллисекунд.  85
 truespeed  Если содержимое тега <marquee> перемещается слишком быстро, то срабатывает встроенный ограничитель скорости, который насильно замедляет скролирование(от 0 до 60 мс)
width Любое целое положительное число в пикселах или процентах 100%

 Итоги использования тега <marquee> бегущая строка

Теперь применяем знания на практике и наслаждаемся результатом 😉

Бегаем по ширине блока туда сюда

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

Прячемся наверх

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

Прячемся вниз

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

Прячемся вниз на фоне

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

P.S. Вот так просто и без сложных скриптов, можно сделать любой текст на Вашем сайте немного живым и порадовать Ваших посетителей.
Удачи!!!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *