Тег marquee — это HTML-элемент, который заставляет текст перемещаться слева направо или сверху вниз. Один тег, никаких скриптов — проще простого. Бегущая строка гибко настраивается под нужды вебмастера. Ниже вы найдете примеры анимации и инструкцию, как установить код в разные места на сайте.
Как использовать Marquee на практике?
Далее по тексту я буду сначала приводить код, а затем пример, как он работает.
Чтобы сделать бегущую строку средствами Html, достаточно вставить любой текст между открытым и закрытым тегом:
1 |
<marquee>Текст, который должен прокручиваться</marquee> |
Если нужна многострочная прокрутка, устанавливается перевод или разрыв строки Html-тегами <p> или <br> внутри текста.
1 |
<marquee>Текст прокрутки. <br> Строка ниже.</marquee> |
Эта анимация — одна из самых простых, она работает в большинстве браузеров.
Использование атрибутов тега <marquee> дает возможность применять для прокрутки не только текст, но и картинку, изменять направление и скорость движения, фон и шрифт. Наиболее используемые атрибуты — behavior и direction.
Behavior
Атрибут устанавливает, как именно будет прокручиваться текст. Если заданное значение отсутствует, браузер будет использовать вариант по умолчанию — scroll.
Возможные значения:
- Scroll — непрерывно перемещает справа налево то, что находится между открытым и закрытым тегом.
- Slide — прокрутка завершается после прохода справа налево.
- Alternate — перемещение из одного угла в другой с эффектом отскока.
Значение Slide сработает лишь один раз при открытии страницы — обновите ее, чтобы увидеть Slide в действии.
1 |
<marquee behavior = 'slide'>Текст прокрутки</marquee> |
1 |
<marquee behavior = 'alternate'>Текст прокрутки</marquee> |
Behavior = scroll не прописывается, оно применяется браузером автоматически.
Direction
Атрибут задает направление движения бегущей строки — слева направо, справа налево, сверху вниз или снизу вверх. Значения не требуют разбора, поскольку их названия говорят сами за себя — right, left, down, up.
1 2 3 |
<marquee direction = 'right'>Текст прокрутки</marquee> <marquee direction = 'up'>Текст прокрутки</marquee> <marquee direction = 'down'>Текст прокрутки</marquee> |
Вариант по умолчанию — слева направо. Он сработает, если ничего не прописывать в direction.
Скорость — Scrolldelay и Scrollamount
Скорость и плавность перемещения анимации, генерируемой marquee, можно изменить с помощью атрибутов scrolldelay и scrollamount.
Scrolldelay устанавливает интервал между каждым смещением в миллисекундах. Например, «1000» почти остановит строку, а значение, равное «60», заставит элементы двигаться очень быстро.
1 |
<marquee scrolldelay='1000'>Текст прокрутки</marquee> |
Значение по умолчанию — 85. Любой вариант ниже 60 будет игнорироваться в некоторых браузерах.
1 |
<marquee scrollamount='40'>Текст прокрутки</marquee> |
Scrollamount определяет скорость строки в виде расстояния между перерисовками. Значение, равное 40, заставит элемент двигаться со скоростью 40 пикселей/кадр.
Loop задает количество показов бегущей строки до ее полной остановки.
1 |
<marquee loop='4'>Текст прокрутки</marquee> |
Значение, равное 4, заставит анимацию запускаться 4 раза, а затем зафиксирует текст на месте.
Как будет выглядеть строка
За внешний вид и красивое оформление информационной строки отвечают эти атрибуты:
- bgcolor — цвет фона, можно вписать название латиницей или шестнадцатеричное значение, не работает с изображениями;
- height — высота поля;
- hspace — горизонтальный отступ;
- vspace — вертикальный отступ;
- width — ширина поля.
Размеры отступов и строк можно указать в пикселях или процентах. Проценты чаще используются, если на сайте адаптивный шаблон.
1 |
<marquee height='40%'>Текст прокрутки</marquee> |
Пример кода с одновременным использованием атрибутов:
1 |
<marquee direction = 'up' height='40' bgcolor = "#ff0000">Текст прокрутки</marquee> |
Добавление картинки или ссылки в бегущую строку происходит внутри marquee, можно совместить это с текстом или добавить размеры для изображения:
1 2 |
<marquee>Текст <img src="http://вашакартинка.jpg" width="88" height="88" alt="картинка" border="0"> Еще текст.</marquee> <marquee>Текст до ссылки <a href="http://вашассылка.ру" >текст для ссылки</a> еще текст.</marquee> |
В качестве заданных атрибутов могут выступать даже инлайн-стили css.
Для этого достаточно добавить их в код следующим образом:
1 |
<marquee style='border:RED 4px SOLID'>Текст прокрутки</marquee> |
Если необходимо задать дополнительные условия для стилей, они вписываются по аналогии, внутри кавычек, но каждое новое правило должно идти через точку с запятой — как в обычном css3. Если важна валидация кода, marquee не пройдет ее, поскольку не включен в стандарт.
Как использовать тег в WordPress
CMS Вордпресс не позволит вставить тег в статью в визуальном редакторе. Для установки кодов необходимо переключиться в режим Текст.
После сохранения кода в этом режиме он сработает на сайте.
Переключение редактирования статьи в визуальный режим редактора снова сделает код нерабочим, поэтому все последующие правки нужно делать только в режиме Текст.
Чтобы добавить тег в код шаблона, воспользуйтесь редактором темы. Выберите необходимую часть — шапку или футер, это файлы с расширением php, и добавьте тег в нужном варианте.
Создание анимированного текста или картинки в большинстве случаев займет не более одной минуты.
Здравствуйте! В вашем примере с картинкой в тексте картинка остаётся в той же строке.
У меня картинка почему-то уходит на следующую строку, если я её ставлю в конце.
Если ставлю в тексте между слов, то она опять же уходит на следующую строку и текст который идёт после неё уходит ещё на строку ниже от картинки. В чём может быть проблема?