Как легко делается в html бегущая строка?

Всем привет. Сегодня я покажу вам 1 быстрый способ, как делается в html бегущая строка. Для этого мы будем использовать тег marquee, который позволяет перемещать не только текст, но и строки. Но мы ограничимся текстом.

Тег marquee и его атрибуты

На самом деле с помощью этого тега сделать бегущую строку невероятно просто. Смотрите на код:

Все мы, вебмастера и разработчики, постоянно работаем с сайтами. Хотел бы вам порекомендовать площадки, которыми пользуюсь сам:
  1. Reg.ru - здесь регистрирую и продлеваю доменные имена, очень надежная компания!
  2. HostIQ - хостинг премиум качества.
  3. Ihor - более бюджетный, но тоже очень качественный хостинг-провайдер.
  4. Telderi.ru - единственная надежная биржа в рунете, на которой можно купить готовые сайты с доходом!

<marquee behavior="alternate" direction="right">
Здесь может быть ваша реклама
</marquee>

Через css настроим фоновый цвет, цвет текста и размер шрифта.

marquee{
background: #246B5C;
font-size: 22px;
color: #fff;
}

И вот он уже результат:

Здесь может быть ваша реклама

А теперь разбираемся с атрибутами. Во-первых, это direction. Мы указали right, но можно также указать left, тогда движение будет начинаться с правого конца и идти в левый. Кроме этого, движение может быть вверх и вниз (up и down). Можете сами протестировать разные значения.

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

  1. scroll — содержимое доходит до края, заходит за край и появляется вначале, начиная движение заново.
  2. alternate — содержимое не выходит за края, перемещаясь внутри них.
  3. slide — контент перемещается один раз в указанную сторону, доходит до края и останавливается.

Какие еще есть атрибуты (необязательные):

  1. scrollamount — скорость движения строки. Задается в пикселах без px, только числом. По умолчанию стоит 6 пикселей. Вы можете поставить больше и меньше, чтобы протестировать в работе это значение.
  2. loop — кол-во повторений движений. Задается любым положительным числом. Если атрибут не прописывать, будет бесконечное кол-во повторений.

В общем-то, это все атрибуты, которые вам надо знать, чтобы управлять бегущей строкой. Все остальное можно настроить через css, что я собственно и сделал (отступы, цвет, фон и т.д.)

Понравилась статья? Поделиться с друзьями:
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: