Html бегущий текст: Ошибка 404 — Запрашиваемая страница на сайте отсутствует. – Бегущая строка | htmlka

| 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

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

Создание бегущей строки в 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-"?" задает ширину бегущей строки в пикселях или процентах от ширины экрана
    height-"?" задает высоту бегущей строки в пикселях или процентах
    <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 всегда выступает в роли отстающего, создавая множество проблем программистам.

HTML код

Актуальность

<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. Он дает команду содержимому дойти до конца и остановиться.

HTML для разметки, CSS для стилей

Стили

Тег <marquee> включает в себя атрибут bgcolor ,который позволяет установить фоновый цвет строки. По-умолчанию он такой же, как и у страницы.

Чтобы создать красивую бегущую строку, HTML недостаточно. Необходимо использовать стили. Например, если мы хотим сделать текст более красивым:

<marquee scrollamount="1">Бегущая строка</marquee>

Применение

Способов использовать бегущую строку много. Можно просто использовать бегущий текст для привлечения внимания. Возможно сделать подобие информера, вмещающее в себя большое количество текста. Можно также вставить ряд картинок, которые будут плавно перемещаться. Таким образом получится показать больше контента.

Бегущая строка в HTML-коде поможет создать простую анимацию, если применить анимированную картинку, например, бегущего человека.

В бегущей строке доступен не только текст

Итоги

Мы разобрали, как сделать бегущую строку в HTML. Это довольно простой метод, которому легко научиться. Однако он является устаревшим и не проходит валидацию. Дальнейшего развития и поддержки не получил, из-за чего могут возникать проблемы в работе в разных браузерах.

CSS лучше подойдет для анимации

Использовать его не рекомендуем. Для создания бегущей строки, а точнее анимации в целом, CSS3 обзавелся уникальным правилом @keyframes. Он позволяет создавать последовательные кадры анимации. А свойство animation уже определяет подачу этой самой анимации. Этот набор инструментов дает гораздо больше возможностей, чем устаревший тег <marquee>. Пользоваться им также гораздо удобней, а самое главное - это то, к чему стремятся уже долгие годы: очистить HTML от ненужного хлама и сделать его более читаемым и структурированным.

Как сделать бегущий текст на картинке, без всякого редактора (от Галины Шадриной)

В этом уроке я покажу как сделать бегущий текст на картинке, не прибегая ни к каким редакторам! Выглядит это вот так.

Падают с ветки

Жёлтые монетки…

Под ногами целый клад!

Это осень золотая

Дарит листья

Не считая...

Золотые дарит листья

дарит листья Вам, и нам,

И всем подряд.

[more=] Сделать это не сложно, надо просто взять вот такую формулу. (Потяните за правый нижний уголочек, и формула вам откроется полностью.

1-я строчка

2-я строчка

3-я строчка

4-я строчка

5-я строчка

6-я строчка

7-я строчка

8-я строчка

9-я строчка

Картинка здесь выступает ВМЕСТО ФОНА, поэтому на нее можно ставить все, что хотите, главное правильно поставить РАЗМЕР КАРТИНКИ. Рассмотрим эту формулу более подробно. Выглядит она вот так. Теперь начинаем подставлять в нее свои значения. Вместо слов АДРЕС КАРТИНКИ, поставляем адрес своей картинки (если с картинка с радикала, то код N1, если с ЯНДЕКС фото, то берете адрес там, а если картинка из интернета, то просто встаете мышкой на картинку, нажимаете правую кнопку мыши и выбираете КОПИРОВАТЬ АДРЕС КАРТИНКИ) Вместо слов ВЫСОТА КАРТИНКИ, ШИРИНА КАРТИНКИ, подставляете размеры своей картинки в пикселях. (Размер картинки всегда можно взять в ее свойствах. Встаете на картинку мышкой, жмете правую кнопку, и выбираете ИНФОРМАЦИЯ ОБ ИЗОБРАЖЕНИИ) Вместо слов ВЫСОТА ДВИЖЕНИЯ ТЕКСТА, ставите ВЫСОТУ КАРТИНКИ, или тот размер, на который вы хотите видеть бегущий текст. Ну а вместо строчек вставляете свой текст. Лишние строчки можно просто стереть, или наоборот добавить новые, если требуется. Теперь код нашей картинки выглядит вот так Где height="530" - высота картинки НУЖНО МЕНЯТЬ НА СВОЮ. width="500" - ширина картинки, НУЖНО МЕНЯТЬ НА СВОЮ. marquee scrollamount="2" - Скорость прокрутки текста (МОЖНО МЕНЯТЬ) height="500" - Высота движения текста. (можно по высоте картинки, можно меньше) [br /] расстояние между строчками текста. Чем БОЛЬШЕ вы поставите [br /], между строчками, тем большее расстояние будет между ними, то есть строчки будут опускаться вниз. Обычно ставится одна или две. Текст редактируется как обычно. Перед первой строчкой текста ставите цвет, размер и расположение текста. Если убавить ВЫСОТУ ДВИЖЕНИЯ ТЕКСТА, то текст будет двигаться только по этой высоте (то есть не во всю картинку). И выглядеть это будет ВОТ ТАК.


Вода в стремительном потоке,

Мой завораживает взгляд.

Реки, живительные соки,

Бросает в бездну водопад.

Текст можно писать любой длины, то есть количество строчек можно добавлять, или наоборот убирать. Это зависит от того, что вы хотите написать на своей картинке.


Ох, понедельник…вот взял и пришёл,

Можно подумать его кто-то звал!

Кучу проблем за собою привёл,

Всех загрузил и работой достал!

ДОБРОЙ РАБОЧЕЙ НЕДЕЛИ ВСЕМ!

К тексту можно добавить небольшие картинки, если вы хотите как то его украсить, например создавая красивое приветствие или поздравление. Код картинки ставьте прямо перед текстом (тогда она будет вначале текста). Или в конце текста (картинка будет сразу за текстом) Выглядеть это будет ВОТ ТАК.


Приятного осеннего дня

Для новичков, кому трудно составить такой код, я его пропишу вот в этом окошечке.

HTML КОД КАРТИНКИ. ВАШ ТЕКСТ. HTML КОД КАРТИНКИ
Если вы хотите вставить только картинки (Т.е. просто картинки, или красивый текст, в виде картинки), то просто вместо строчек текста, ставьте HTML коды картинок. Выглядит это вот так.

Красивой вам ОСЕНИ

Выглядит в кодах это вот так Где красным выделен код первой картинки (вместо первой строчки) Голубым - код второй картинки (вместо второй строчки) Зеленым - код третьей картинки и +текст (вместо третьей строчки) Вот и все. Успехов в вашем творчестве![/more]

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *