| HTML | WebReference
Элемент <marquee> создаёт бегущую строку на странице. На самом деле содержимое контейнера <marquee> не ограничивается строками и позволяет перемещать (скролировать) любые элементы веб-страницы — изображения, текст, таблицы, элементы форм и т. д. Перемещение можно задать не только по горизонтали, но и по вертикали, в этом случае указываются размеры области, в которой будет происходить движение.
Это нестандартный элемент, взамен него используйте стили.
Закрывающий тег
Атрибуты
- behavior
- Задаёт тип движения содержимого контейнера <marquee>.
- bgcolor
- Цвет фона.
- direction
- Указывает направление движения содержимого контейнера <marquee>.
- height
- Высота области прокрутки.
- hspace
- Горизонтальные поля вокруг контента.
- loop
- Задаёт, сколько раз будет прокручиваться содержимое.
- scrollamount
- Скорость движения контента.
- scrolldelay
- Величина задержки в миллисекундах между движениями.
- truespeed
- Отменяет встроенный ограничитель скорости при низких значениях атрибута scrolldelay.
- vspace
- Вертикальные поля вокруг содержимого.
- width
- Ширина области прокрутки.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>MARQUEE</title>
</head>
<body>
<marquee behavior="alternate" direction="left" bgcolor="#ffcc00">
Атомистика контролирует трансцендентальный катарсис.
</marquee>
</body>
</html>Примечание
В качестве альтернативы <marquee> применяется стилевое свойство animation.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>marquee</title> <style> .marquee { overflow: hidden; white-space: nowrap; /* Запрещаем переносы слов */ animation: marquee 10s linear infinite alternate; background: #ffcc00; padding: 5px; } @keyframes marquee { from { text-indent: 100%; } to { text-indent: 0; } } </style> </head> <body> <div>Атомистика контролирует трансцендентальный катарсис.</div> </body> </html>
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
×Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 09.10.2018
Редакторы: Влад Мержевич
Создание бегущей строки в html
бегущая строка
Бегущая строка создается с помощью тегов
<marquee> и </marquee>
Между этими тегами вставляется текст или рисунок,или все вместе,которые должны прокручиваться.В тег <marquee> вставляются атрибуты строки,примерно так:
<marquee атрибуты>Контент бегущей строки </marquee>
Атрибуты бегущей строки:
behavior- тип движения со следующими значениями:
scroll— циклическая,
alternate— перемещение текста от одного края к другому
slide— остановка текста у одного края
| бегущая строка | бегущая строка | бегущая строка Вставка фото в бегущую строку |
direction- направление текста
up— весь текст идет снизу вверх
down— весь текст идет сверху вниз
left— текст идет налево
right— текст идет направо
Также используются следующие атрибуты:
scrollmount— шаг перемещения текста за заданный интервал времени со значениями в пикселях:
scrollmount— «1» «2» «3» ваш выбор
scrolldelay— интервал между шагами бегущей строки в миллисекундах к примеру:
scrolldelay— «100» «150» «200» ваш выбор
loop— число проходов текста
loop— «infinite»-постоянное прокручивание
loop=-«5» ваш выбор
hspace-«0»-ваш выбор-отступ поля справа и слева от бегущей строки в пикселях
vspace— «0»-ваш выбор-отступ поля сверху и снизу от бегущей строки в пикселях
width-«?» задает ширину бегущей строки в пикселях или процентах от ширины экрана
<font color=»#?»>бегущая строка</font> -определяет цвет текста в бегущей строке
Пример и код бегущей строки.
Без денег хорошо 
но с деньгами лучше
Вот код этой строки.
<marquee behavior=»scroll» bgcolor=»#D8FFD0″ scrollAmount=»3″ scrolldelay=»10″
>
<font size=»5″ color=»#0804FB»>Без денег хорошо</font>
<img src=»dollar.jpg»>
<font size=»5″ color=»#0804FB»>но с деньгами лучше
</font></marquee>
Создаем бегущую строку HTML
Для создания бегущей строки HTML имеет закрывающийся тег <marquee>. Он может содержать не только текст, но и другие элементы: таблицы, изображения, формы и так далее. При помощи атрибутов задается не только горизонтальное перемещение, но и вертикальное. Для последнего необходимо указывать высоту поля.
Достаточно интересно, что первоначально он создавался под браузер Internet Explorer, а другие научились его понимать позже. Хотя обычно происходит наоборот, и именно браузер от Microsoft всегда выступает в роли отстающего, создавая множество проблем программистам.
Актуальность
<marquee> — тег бегущей строки в HTML. Его поддерживают все актуальные версии браузеров. В этом плане нет никаких проблем, и можно его смело использовать.
Однако с точки зрения семантики он считается устаревшим и более не включен в спецификацию HTML. Таким образом код, включающий данный тег, не пройдет валидацию.
С чем это связано? В современном HTML бегущей строки нет, так как всю анимацию и стилизацию выполняет CSS. Порой приходится использовать и JS. Соответственно, HTML отвечает только за разметку. Тем не менее <marquee> будет прекрасно работать, благодаря сохранившейся совместимости с более старыми версиями.
Синтаксис
В HTML бегущая строка задается закрывающимся тегом:
<marquee>...</marquee>Внутрь может быть помещен не только текст, но и другие элементы, например, фотографии или таблицы. Напомним, что данный код хоть и является рабочим, валидность он не пройдет.
Скорость прокрутки
Управлять бегущей строкой в HTML можно при помощи атрибутов. Скорость движения задается через атрибут scrollamount. Выглядеть это будет следующим образом:
<marquee scrollamount="1">some text</marquee> Изменение скорости происходит за счет постоянного удаления информации о положении текста и отображении его на новом месте. Изменяя значение в атрибуте, мы задаем количество пикселей между старым положением и новым. Соответственно, чем больше значение, тем больше скорость. Данный атрибут поддерживается всеми браузерами.
Если скорость прокрутки слишком большая, включится автоматическое ограничение, чтобы текст оставался читаемым. Если необходимо обойти данное ограничение, вписываем атрибут truespeed. Отметим, что не все версии браузеров его понимают. Работать с ним может IE и Firefox.
Задержку между прокруткой текста можно установить при помощи атрибута scrolldelay.
Поле прокрутки
По ширине тег займет всю ширину родительского элемента. А по высоте будет равен контенту внутри. Чтобы изменить это, необходимо использовать два атрибута, отвечающих за высоту и ширину. Это height и width соответственно. Можно использовать пиксели или проценты.
Также есть еще два атрибута, а именно hspace и vspace. Они необходимы для создания пустого пространства вокруг бегущей строки, а точнее — отступа. Расстояние задается соответственно по горизонтали и вертикали.
Параметры движения
Помимо скорости, можно задавать и другие параметры движения. За направлением движения отвечает атрибут direction. По-умолчанию текст движется справа налево. Такое движение соответствует значению right. Чтобы заставить текст двигаться в противоположную сторону, достаточно указать left, а выглядеть это будет следующим образом:
<marquee direction="left">...</marquee>Помимо горизонтальной прокрутки, можно указать и вертикальную. Для движения содержимого вверх используем значение up, а для движения вниз — down.
Для изменения характера движения есть еще два интересных и полезных атрибута. Можно задать число прокруток, после которых содержимое остановится в крайнем положении и не будет двигаться. Такое свойство соответствует атрибуту loop. По-умолчанию стоит значение -1. Если поставить 0, текст не будет двигаться вовсе. Целые значение выше 0 запустят счетчик.
Более объемным атрибутом является behavior. Он отвечает за способ движения контента. По умолчанию стоит значение scroll. Он означает, что контент будет перемещаться по заданному направлению, а после того как полностью скроется, начнет свое движение заново.
Если контента мало, можно задать атрибуту значение alternate. После достижения крайней точки содержимое начнет свое движение в обратном направлении. И так бесконечное количество раз, если не задан счетчик.
Последнее значение — это slide. Он дает команду содержимому дойти до конца и остановиться.
Стили
Тег <marquee> включает в себя атрибут bgcolor ,который позволяет установить фоновый цвет строки. По-умолчанию он такой же, как и у страницы.
Чтобы создать красивую бегущую строку, HTML недостаточно. Необходимо использовать стили. Например, если мы хотим сделать текст более красивым:
<marquee scrollamount="1">Бегущая строка</marquee>Применение
Способов использовать бегущую строку много. Можно просто использовать бегущий текст для привлечения внимания. Возможно сделать подобие информера, вмещающее в себя большое количество текста. Можно также вставить ряд картинок, которые будут плавно перемещаться. Таким образом получится показать больше контента.
Бегущая строка в HTML-коде поможет создать простую анимацию, если применить анимированную картинку, например, бегущего человека.
Итоги
Мы разобрали, как сделать бегущую строку в HTML. Это довольно простой метод, которому легко научиться. Однако он является устаревшим и не проходит валидацию. Дальнейшего развития и поддержки не получил, из-за чего могут возникать проблемы в работе в разных браузерах.
Использовать его не рекомендуем. Для создания бегущей строки, а точнее анимации в целом, CSS3 обзавелся уникальным правилом @keyframes. Он позволяет создавать последовательные кадры анимации. А свойство animation уже определяет подачу этой самой анимации. Этот набор инструментов дает гораздо больше возможностей, чем устаревший тег <marquee>. Пользоваться им также гораздо удобней, а самое главное — это то, к чему стремятся уже долгие годы: очистить HTML от ненужного хлама и сделать его более читаемым и структурированным.
В этом уроке я покажу как сделать бегущий текст на картинке, не прибегая ни к каким редакторам! Выглядит это вот так.
|