Бегущая строка - это движущаяся строка, элемент для привлечения внимания в веб-дизайне. Представляет из себя анимированный движущийся текст, картинки, которые движутся в определенном направлении. Ранее был популярен тег <marquee>, сейчас же он считается устаревшим и не рекомендуется к применению. вместо него лучше применять технологии, основанные на CSS и Javascript. С исторической целью разберем использование тега <marquee>.
Основы использования тега <marquee>
Тег <marquee> создает бегущую строку. Простейший пример:
<marquee>текст бегущей строки</marquee>
Настройка внешнего вида
Цвет фона
Чтобы изменить цвет фона, используйте атрибут bgcolor
:
<marquee bgcolor="yellow">текст бегущей строки</marquee>
Движение изображений
Для движения изображения поместите его код между тегами <marquee>:
<marquee><img src="URL_изображения"></marquee>
Направление движения. Направление задается атрибутом direction
. Возможные значения: left
(по умолчанию), right
, up
, down
.
<marquee direction="right"><img src="АДРЕС КАРТИНКИ В СЕТИ"></marquee>
Изменить скорость движения можно при помощи параметра scrollamount. Чем большее значение он принимает, тем скорость выше:
<marquee scrollamount="30">бегущий текст или код картинки</marquee>
Текст или картинку можно заставить двигаться вверх (up) или вниз (down) при помощи параметра direction и указав высоте (height) движения:
<marquee height="150" direction="up">текст или картинка</marquee>
Дополнительные параметры тега бегущей строки marquee
Ширина и высота
Атрибуты width и height задают размеры области бегущей строки:
<marquee width="200" height="100">Текст</marquee>
Цвет текста
Цвет текста можно изменить с помощью CSS:
<marquee style="color: red;">Текст</marquee>
Развернутый код бегущей строки
<marquee width="100" height="100" direction="up" bgcolor="#FFFF55" behavior="scroll" scrollamount="2" scrolldelay="9" style="border: 2px solid #D4FFAA;">Бегущая строка</marquee>
- marquee – задает собственно саму бегущую строку,
- width – ширина поля, в котором будет бегать текст или картинка,
- height – высота поля бегущей строки,
- style="border:" – определяет параметры внешней границы фона, ее толщину, цвет, вид,
- direction – указывает направление движения (up, down, left, right),
- bgcolor – цвет фона бегущей строки,
- behavior – параметр движения (scroll, slide, alternate),
- scrollamount – расстояние между точками движения,
- scrolldelay – задержка между кадрами,
Если добавить в код бегущей строки onmouseover=this.stop() onmouseout=this.start(), то срока будет останавливать свое движение при наведении на нее курсора. Работает не везде.
loop – показывает сколько раз должна циклов должна сделать бегущая строка.
Устаревание тега <marquee>
Тег <marquee>
не поддерживается в HTML5 и считается устаревшим. Вместо него рекомендуется использовать CSS-анимации или JavaScript. Например, с помощью CSS можно создать аналогичный эффект:
Как создать бегущую строку с помощью анимации CSS
.marquee {
white-space: nowrap;
border: 1px solid black;
width: 450px;
overflow: hidden;
position: relative; /* Для корректного позиционирования внутреннего элемента */
margin: 20px;
}
.marquee span {
display: inline-block;
padding-left: 1%; /* Начальное положение текста */
animation: marquee 20s linear infinite;
}
@keyframes marquee {
0% { transform: translateX(-100%); } /* Начальное положение: текст полностью слева */
100% { transform: translateX(100%); } /* Конечное положение: текст полностью справа */
}
и HTML-код:
<div class="marquee">
<span>Это текст бегущей строки, который движется слева направо.</span>
</div>
Тег marquee устарел, и его нужно стараться избегать для получения валидного кода. С помощью средств CSS анимации можно добиться перемещения текста или изображений в нужном направлении, задать дополнительные свойства для получения эффекта движения.
Очень вовремя!
А как запустить баннеры при наведение на которые курсором последние останавливались и давали ссылку на сайт или блог???
Очень рада, Юрий, что вам понравилось сообщение. Баннер при помощи бегущей строки можно сделать следующим образом: нужно создать код, который будет состоять из обычного кода бегущей строки (выделено в скриншоте желтым); кода, отвечающего за остановку строки при наведении на нее курсора (выделено зеленым) и собственно самих ссылок на сообщения (отмечено красным). Скрин можете постмотреть по ссылке http://r-img.fotki.yandex.ru/get/6001/i-nat2010.f/0_42fc8_519a665e_orig"
Скопировать код можете отсюда:
<marquee width=100 height=100 direction="down"
bgcolor=#FFFF55 behavior="scroll" scrollamount="2" scrolldelay="9"
style="border: 2px solid #D4FFAA" align=center
onmouseover=this.stop() onmouseout=this.start()>
<a href="URL сообщения 1">название ссылки 1</a><br/>
<a href="URL сообщения 2">название ссылки 2</a><br/>
<a href="URL сообщения 3">название ссылки 3</a><br/>
...<a href="URL сообщения N">название ссылки N</a>
</marquee>
Natalka СПАСИБО!!!
Пожалуйста!)))
Natalka добрый вечер! Опять нуждаюсь в вашей помощи. Сделал по вашей рекомендации крутилку баннеров, но там появляется красная полоса (фон крутилки). Можно ли его как-то убрать или сделать чтобы он не показывался? И сделать так, чтобы баннер останавливался на насколько секунд в окошке как у BlogUpp.
Да еще, как вы сделали что комментарии публикуются сразу в блоге без "одобрения" ? Забыл, крутилку баннеров делал на
http://fishinform.blogspot.com/
Юрий, это можно сделать в настройках комментариев. Там есть такой пункт "Ввод комментариев", который и означает их модерацию, т.е. если у вас активирован пункт Всегда, то модерация будет. Отмена модерации - активированный пункт Никогда. Только для сообщений старше N дн. - это промежуточный вариант.
P.S. Интересный у вас получился вариант с баннерами. Я иногда встречаю такое на сайтах. Главное - экономит место.
а есть ли возможность сделать строку сплошной. Ну обычно выглядит так картинка например
1...2...3____пробел____1...2...3
хочется что бы было 1...2...3...1...2...3 без разделения
С помощью кодов html такое сделать не удастся, существуют специальные скрипты для этого. Однако, вариантом выхода является составление очень длинной бегущей строки.