Как сделать бегущую строку самому
Привет всем! Сегодня мы рассмотрим как сделать бегущую строку самому. На самом деле в этом нет ничего сложного. Также мы рассмотрим с вами как добавлять стили бегущей строке.
Итак, для того чтобы сделать бегущую строку нам понадобиться html-тег <marquee>.
Давайте рассмотрим самый простой пример бегущей строки:
Синтаксис
<marquee>Это простой пример бегущей строки</marquee>
Результат
Это простой пример бегущей строки
Далее мы рассмотрим атрибуты бегущей строки и их значения.
- behavoir — задает тип движения содержимого контейнера. У данного атрибута есть свои податрибуты:
alternate-
- — контент перемещается между правым и левым краем.
<marquee behavior="alternate">Контент перемещается между правым и левым краем элемента</marque>
Контент перемещается между правым и левым краем элемента
scroll
-
- — контент перемещается в направлении, заданным атрибутом direction, затем скрывается за пределами области, после чего начинает движение сначала.
<marquee behavior="scroll" direction="up">Строка поднимается вверх</marque>
Строка поднимается вверх
slide
-
- — контент перемещается в направлении, заданным атрибутом 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 пикселей.