В этой статье я расскажу о том как сделать бегущую строку на сайте с помощью специального тега HTML - . Для начала стоит отметить, что использование бегущий строки в качестве какой-то анимации на сайте - это уже давно не модно. Про такие сайты говорят, что они из прошлого века.
На мой взгляд, бегущие строки в нынешних условиях вообще лучше не использовать. В крайних случаях их можно использовать лишь для лучшей видимости важной информации (например, актуальные акции, скидки). Есть масса других современных способов как можно донести до пользователя полезную информацию (flash-анимация, баннеры).
Также стоит отметить, что есть и другой способ создания бегущей строки помимо тега marquee. Этот способ реализуется через JavaScript, но из-за нецелесообразности его применения (он нагружает страницу), мы даже не станем его рассматривать.
HTML тегИтак, в HTML есть специальный тег для создания бегущей строки: ... . У него есть множество атрибутов с параметрами, которые довольно просты, поэтому проблем с настройками не должно возникнуть. Ниже я разберу подробно все атрибуты и параметры тега 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
- бегущая строка перемещается циклично: справа налево, далее слева направо (бегает между краями). Например:
А так эта строка выглядит на сайте:
Строка с атрибутом behavior="alternate"
Scroll - бегущая строка перемещается за пределы области в том направлении, которое указывает атрибут direction (с параметром), а далее циклично повторяется. На мой взгляд этот вариант встречается чаще всего. Например:
. slide - очень похож на scroll, однако в конце строка останавливается и больше не повторяется. Например:
Строка с атрибутом behavior="slide" direction="right"
5. direction="параметры"
- задает направление движения бегущей строки. Может принимать следующие значения:
. down
- движение сверху вниз. Например:
Строка с атрибутом behavior="scroll" direction="down"
. up - движение снизу вверх. Например:
Строка с атрибутом behavior="scroll" direction="up"
. left - движение справа налево. Примечание: left установлено по умолчанию. Например:
Строка с атрибутом behavior="scroll" direction="left"
. right - движение слева направо. Например:
Строка с атрибутом behavior="scroll" direction="right"
6. hspace="число" - задает отступ строки по горизонтали до других объектов. Аналогичный атрибут есть у популярного тега img .
7. vspace="число" - задает отступ по вертикали до других объектов.
8. loop="число" - какое количество раз нужно прокрутить содержимое. В параметре указывается число, которое и задает количество повторений. Примечание: число -1 означает бесконечный цикл прокрутки. По умолчанию установлено -1.
9. scrollamount="число" - скорость движения бегущей строки. Число задает количество пикселей, на которое переместиться объект за один такт. Примечание: по умолчанию скорость равна 6 пикс./сек. Например:
Строка с атрибутом scrollamount="10"
10. scrolldelay="число" - задает задержку между шагами бегущей строки в миллисекундах. Например:
Строка с атрибутом scrolldelay="500"
Напоследок приведу 2 примера использования бегущих строк. Пример с использованием объекта div:
Бегущий элемент divБегущий элемент div
Пример бегущего изображения:
Пользовательские настройки –> Профиль пользователя – здесь выберите Blogger
Сохраните изменения.
Подтвердите переход на и задайте свое имя или никнейм.
Не забудьте загрузить аватар в вашем профиле Blogger.
Как удалить профиль гугл плюс Если вы решили раз и навсегда избавиться от профиля Г+, то перейдите на свою страницу гугл плюс –> Настройки –> прокрутите страницу до конца вниз –> удалить аккаунт гугл плюс:
Сегодня расскажу что такоеCSS3, с чем его едят, где его искать, как правильно его прописывать. Предупреждаю, буду рассказывать от себя, упрощенно для широкой публики, как я это вижу + примеры. Итак, начнем издалека.
CSS – это стили, в которых прописываются свойства объекта. Значит, они есть во всех существующих движках, если вы их не можете найти, значит либо не там смотрите, либо их действительно нет (кривой сайт
). Где же они обычно найти? Обычно это корень сайта, название файла style.css, хотя, в принципе, название не так важно, как расширение.css, если файл с таким расширением – это файл стилей.
Смотрите также на моём блоге.
