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

В этой статье я расскажу о том как сделать бегущую строку на сайте с помощью специального тега HTML – <Marquee>. Для начала стоит отметить, что использование бегущий строки в качестве какой-то анимации на сайте – это уже давно не модно. Про такие сайты говорят, что они из прошлого века.

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

Также стоит отметить, что есть и другой способ создания бегущей строки помимо тега marquee. Этот способ реализуется через JavaScript, но из-за нецелесообразности его применения (он нагружает страницу), мы даже не станем его рассматривать.

HTML тег <marquee>

Итак, в HTML есть специальный тег для создания бегущей строки: <marquee>…</marquee>. У него есть множество атрибутов с параметрами, которые довольно просты, поэтому проблем с настройками не должно возникнуть. Ниже я разберу подробно все атрибуты и параметры тега marquee. Кстати, в него можно заключать не только текст, но и изображение и другие элементы сайта. Поэтому эта статья отвечает ещё и на вопрос как сделать бегущее изображение, объект и т.п.

Синтаксис тега <marquee>

<marquee атрибут="параметр" ...>Объекты, которые должны перемещаться</marquee>

Атрибуты и параметры <marquee>

1. width=”число/процент” — задает ширину бегущей строки в пикселях/процентах. Те, кто знаком с html наверняка знакомы с таким атрибутом. Например:

  • width=”240px” — задает ширину в 240 пикселей;
  • width=”40%” — задает ширину в 40% в зависимости от ширины блока, в котором находится объект;





2. height=”число/процент” — задает высоту бегущей строки в пикселях/процентах. Пример можно привести такой же как и с первым атрибутом. Например:

  • height=”400px” — задает высоту в 400 пикселей;
  • height=”30%” — задает высоту в 30% в зависимости от высоты блока, в котором находится объект;

Примечание: если бегущая строка состоит только из одной строки, то высоту можно не указывать, поскольку она автоматически определиться в зависимости от размера шрифта, который задается параметром font-size: Npx.

3. bgcolor=”цвет” — задает цвет фона контейнера. Выбрать цвет можно на странице: коды html цветов. Примечание: если атрибут bgcolor не задан, то по умолчанию фоном будет цвет фона страницы.

4. behavior=”параметр” — это один из самых важных атрибутов бегущий строки. Он задает поведение бегущей строки. Имеет довольно много различных вариантов:

alternate — бегущая строка перемещается циклично: справа налево, далее слева направо (бегает между краями). Например:

<marquee width="400" height="50" behavior="alternate"></marquee>

А так эта строка выглядит на сайте:


Строка с атрибутом behavior=”alternate”

scroll — бегущая строка перемещается за пределы области в том направлении, которое указывает атрибут direction (с параметром), а далее циклично повторяется. На мой взгляд этот вариант встречается чаще всего. Например:

<marquee width="400" height="50" behavior="scroll" direction="left"></marquee>


Строка с атрибутом behavior=”scroll” direction=”left”

slide – очень похож на scroll, однако в конце строка останавливается и больше не повторяется. Например:

<marquee width="400" height="50" behavior="slide" direction="right"></marquee>


Строка с атрибутом behavior=”slide” direction=”right”

5. direction=”параметры” — задает направление движения бегущей строки. Может принимать следующие значения:

down – движение сверху вниз. Например:

<marquee width="400" height="50" behavior="scroll" direction="down"></marquee>


Строка с атрибутом behavior=”scroll” direction=”down”

up — движение снизу вверх. Например:

<marquee width="400" height="50" behavior="scroll" direction="up"></marquee>


Строка с атрибутом behavior=”scroll” direction=”up”

left — движение справа налево. Примечание: left установлено по умолчанию. Например:

<marquee width="400" height="50" behavior="scroll" direction="left"></marquee>


Строка с атрибутом behavior=”scroll” direction=”left”

right — движение слева направо. Например:

<marquee width="400" height="50" behavior="scroll" direction="right"></marquee>


Строка с атрибутом behavior=”scroll” direction=”right”

6. hspace=”число” — задает отступ строки по горизонтали до других объектов. Аналогичный атрибут есть у популярного тега img.

7. vspace=”число” — задает отступ по вертикали до других объектов.

8. loop=”число” — какое количество раз нужно прокрутить содержимое. В параметре указывается число, которое и задает количество повторений. Примечание: число -1 означает бесконечный цикл прокрутки. По умолчанию установлено -1.






9. scrollamount=”число” — скорость движения бегущей строки. Число задает количество пикселей, на которое переместиться объект за один такт. Примечание: по умолчанию скорость равна 6 пикс./сек. Например:

<marquee width="400" height="50" crollamount="10"></marquee>


Строка с атрибутом scrollamount=”10″

10. scrolldelay=”число” — задает задержку между шагами бегущей строки в миллисекундах. Например:

<marquee width="400" height="50" scrolldelay="500"></marquee>


Строка с атрибутом scrolldelay=”500″

Напоследок приведу 2 примера использования бегущих строк. Пример с использованием объекта div:

<marquee width="400" height="50">
<div style="width:200px" class="quote">Бегущий элемент div</div>
</marquee>

Бегущий элемент div


Пример бегущего изображения:

<marquee width="400" height="50"
<img src="img/smailik.jpg">
</marquee>






Читайте также:

• Коды символов для HTML

• Как добавить кнопку "Наверх" на сайте

• Как сделать якорь ссылки

• Как сделать форму обратной связи на php с каптчей

• Как скруглить углы в HTML через CSS

• Как вставить музыку на сайте

• Как сделать карту изображений (карта ссылок)

• Как сделать слайдер

← Перейти в каталог html уроков и советов

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.