Как сделать бегущую строку на сайте
В этой статье я расскажу о том как сделать бегущую строку на сайте с помощью специального тега HTML - marquee. Для начала стоит отметить, что использование бегущий строки в качестве какой-то анимации на сайте - это уже давно не модно. Про такие сайты говорят, что они из прошлого века. На мой взгляд, бегущие строки в нынешних условиях вообще лучше не использовать. В крайних случаях их можно использовать лишь для лучшей видимости важной информации (например, актуальные акции, скидки). Несмотря на это, есть масса других способов как можно донести до пользователя полезную информацию.
Тег Marquee
В HTML есть специальный тег для создания бегущей строки: <marquee>...</marquee>. У него есть множество атрибутов с параметрами, которые довольно просты, поэтому проблем с настройками ни у кого не должно возникнуть. Ниже я разберу подробно все атрибуты и параметры тега marquee. Кстати, в него можно заключать не только текст, но и изображение и другие элементы сайта. Поэтому эта статья отвечает ещё и на вопрос как сделать бегущее изображение, объект и т.п.
Также стоит отметить, что есть и другой способ создания бегущей строки помимо тега marquee. Этот способ реализуется через JavaScript (в этой статье мы не будем рассматривать этот метод).
Для начала немножко синтаксиса тега 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> |
Так эта строка выглядит на сайте:
|
|
На этом описание тега marquee можно завершить. Напоследок приведу 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> |
Читайте также:
• Добавление счетчика посещений на сайт
• Как сделать выпадающие меню
• Как сделать favicon
• Как сделать красивую подсказку для ссылок
• Как увеличивать изображения (все способы)
• Как добавить социальные кнопки на сайт
← Перейти в каталог html уроков и советов
|
