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

Друзья, на нашем сайте происходит работа по смене дизайна и логики. Планируется добавить новые разделы, чтобы сделать его более полезным. В связи с этим в данный момент на сайте не настроена навигация по сайту, но вы всё равно можете читать статьи и получать нужную вам информацию.

На данном ресурсе вы сможете обучиться основам создания сайтов. Здесь вы сможете найти статьи о том как создавать макеты сайтов в программе Photoshop, также научитесь верстать сайты и устанавливать их на Wordpress .

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

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

Итак, для того чтобы сделать бегущую строку нам понадобиться 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 пикселей.