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

В этой статье я расскажу о том как сделать бегущую строку на сайте с помощью специального тега 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"</div> </marquee>