Как сделать бегущую строку самому

Привет всем! Сегодня мы рассмотрим как сделать бегущую строку самому. На самом деле в этом нет ничего сложного. Также мы рассмотрим с вами как добавлять стили бегущей строке.

Итак, для того чтобы сделать бегущую строку нам понадобиться html-тег <marquee>.

Давайте рассмотрим самый простой пример бегущей строки:

Синтаксис

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

Результат
Это простой пример бегущей строки

Далее мы рассмотрим атрибуты бегущей строки и их значения.

• behavoir — задает тип движения содержимого контейнера. У данного атрибута есть свои податрибуты:
  alternate
  1. — контент перемещается между правым и левым краем.

  <marquee behavior="alternate">Контент перемещается между правым и левым краем элемента</marque>

  Контент перемещается между правым и левым краем элемента

  scroll

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

  <marquee behavior="scroll" direction="up">Строка поднимается вверх</marque>

  Строка поднимается вверх

  slide

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

  <marquee behavior="slide" direction="up">Строка движется вправо</marque>

  Строка движется вправо

• bgcolor — задает цвет фона бегущей строки

<marquee bgcolor="orange">Задает оранжевый фон</marquee>

Задает оранжевый фон

• direction — задает направление движения содержимого бегущей строки

<marquee direction="down">Контент движется вниз</marquee>

Контент движется вниз

• height — задает высоту области прокрутки бегущей строки

<marquee height="100" bgcolor="black">Высота области прокрутки 100 пикселей</marquee>

Высота области прокрутки 100 пикселей

• loop — задает количество прокручивания контента бегущей строки.

  <marquee loop="5">Контент прокрутится 5 раз </marquee>

  Контент прокрутится 5 раз

• scrollamount — задает скорость движения контента бегущей строки.

  <marquee scrollamount="25"
  bgcolor="yellow"
  color="black">
  Скорость прокрутки 25
  </marquee>

  Скорость прокрутки 25

• scrolldelay — время задержки между прокруткой контента бегущей строки. Задается в миллисекундах.

  <marquee scrolldelay="150">Следующая прокрутка через 150 миллисекунд</marquee>

  Следующая прокрутка через 150 миллисекунд

• truespeed — отменяет встроенный ограничитель для скорости при низких значениях атрибута scrolldelay.

   <marquee scrolldelay="30" truespeed>
      Отменяет встроенный ограничитель скорости
    </marquee>

  Отменяет встроенный ограничитель скорости

• hspace и vspace — горизонтальные и вертикальные поля. Предназначены для добавления пустого пространства вокруг содержимого бегущей строки.

   <marquee width="550" height="150" hspace="5" vspace="7">
     Вертикальные и горизонтальные поля. 
     hspace - слева и справа, vspace - снизу и сверху.
    </marquee>

  Вертикальные и горизонтальные поля.
  hspace — слева и справа, vspace — снизу и сверху.

• width — задает ширину контента.

 <marquee width="550">
   Ширина 550 пикселей.
  </marquee>

Ширина 550 пикселей.