История тега «бегущая строка» <marquee>
Бегущая строка на сайте позволяет обратить внимание пользователя на себя, тем самым привлечь к каким то действиям, например покупке или звонку.
Данное внимание позволит организовать ПАРНЫЙ тег <marquee>
Синтаксис довольно прост
|
1 |
<marquee>Бегущая строка</marquee> |
Для того что бы бегущая строка была под ваш дизайн нужно задать дополнительные стили. Например:
|
1 |
<marquee style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущий текст</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>
Теперь применяем знания на практике и наслаждаемся результатом 😉
Бегаем по ширине блока туда сюда
|
1 |
<marquee behavior="alternate" scrollamount="10" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000aa0 0px 1px 1px;">Бегущий текст</marquee> |
Прячемся наверх
|
1 |
<marquee direction="up" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущий текст</marquee> |
Прячемся вниз
|
1 |
<marquee direction="down" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000aa0 0px 1px 1px;">Бегущий текст</marquee> |
Прячемся вниз на фоне
|
1 |
<marquee bgcolor="#Ff5533" width="500" height="300" scrollamount="12" direction="down" style="border: 2px solid #000aa0; color: #D9FFFF; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee> |
Бегущая строка
Не забывает задавать тексту настройки шрифтов и цвет
P.S. Вот так просто и без сложных скриптов, можно сделать любой текст на Вашем сайте немного живым и порадовать Ваших посетителей новыми возможностями и динамикой вашего текста.
Удачи в верстке!!!