В этой статье я расскажу о том как сделать бегущую строку на сайте с помощью специального тега 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>
А так эта строка выглядит на сайте:
• scroll — бегущая строка перемещается за пределы области в том направлении, которое указывает атрибут direction (с параметром), а далее циклично повторяется. На мой взгляд этот вариант встречается чаще всего. Например:
<marquee width="400" height="50" behavior="scroll" direction="left"></marquee>
• slide - очень похож на scroll, однако в конце строка останавливается и больше не повторяется. Например:
<marquee width="400" height="50" behavior="slide" direction="right"></marquee>
5. direction="параметры" — задает направление движения бегущей строки. Может принимать следующие значения:
• down - движение сверху вниз. Например:
<marquee width="400" height="50" behavior="scroll" direction="down"></marquee>
• up — движение снизу вверх. Например:
<marquee width="400" height="50" behavior="scroll" direction="up"></marquee>
• left — движение справа налево. Примечание: left установлено по умолчанию. Например:
<marquee width="400" height="50" behavior="scroll" direction="left"></marquee>
• right — движение слева направо. Например:
<marquee width="400" height="50" behavior="scroll" direction="right"></marquee>
6. hspace="число" — задает отступ строки по горизонтали до других объектов. Аналогичный атрибут есть у популярного тега img.
7. vspace="число" — задает отступ по вертикали до других объектов.
8. loop="число" — какое количество раз нужно прокрутить содержимое. В параметре указывается число, которое и задает количество повторений. Примечание: число -1 означает бесконечный цикл прокрутки. По умолчанию установлено -1.
9. scrollamount="число" — скорость движения бегущей строки. Число задает количество пикселей, на которое переместиться объект за один такт. Примечание: по умолчанию скорость равна 6 пикс./сек. Например:
<marquee width="400" height="50" crollamount="10"></marquee>
10. scrolldelay="число" — задает задержку между шагами бегущей строки в миллисекундах. Например:
<marquee width="400" height="50" scrolldelay="500"></marquee>
Напоследок приведу 2 примера использования бегущих строк. Пример с использованием объекта div:
<marquee width="400" height="50"> <div style="width:200px" class="quote">Бегущий элемент div</div> </marquee>
Пример бегущего изображения:
<marquee width="400" height="50" <img src="img/smailik.jpg"> </marquee>
Читайте также:
• Коды символов для HTML
• Как добавить кнопку "Наверх" на сайте
• Как сделать якорь ссылки
• Как сделать форму обратной связи на php с каптчей
• Как скруглить углы в HTML через CSS
• Как вставить музыку на сайте
• Как сделать карту изображений (карта ссылок)
• Как сделать слайдер