Купить ссылку здесь

Бегущая строка HTML [тег marquee]

XAKER

[email protected]
Администратор
Сообщения
1 325
Репутация
569
Баллы
156
1 481
Как на сайте сделать бегущую строку с помощью HTML

Тег — <marquee>. Изначально этот тег был разработан для браузера Internet Explorer, но со временем и другие браузеры стали поддерживать его применение.

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

В бегущую строку можно вставить новость, объявление, приветствие, отобразить текущее время и дату и много много другой интересной информации.

Пример:

Код:
<marquee>Текст двигается справа налево</marquee>
Текст двигается справа налево

По умолчанию бегущая строка движется только справа налево, чтобы изменить направление строки надо к тегу добавить атрибут direction со значением right

Код:
<marquee direction="right">Текст двигается слева направо</marquee>
Текст двигается слева направо

Так же можно задавать стили тексту:
Подставив значение up для атрибута direction мы заставим строчку двигаться снизу вверх:
Код:
<marquee direction="up" style="color: #23b7e5 font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">снизу вверх</marquee>
снизу вверх

Так же можно увеличить или уменьшить скорость прокрутки бегущей строки, для этого мы используем атрибут scrollamount. В кавычках указываем число от 1.

Код:
<marquee scrollamount="30" direction="down" style="color: #23b7e5; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>
Бегущая строка

Сделаем бегущую строку в рамочке на цветном фоне:
Код:
<marquee bgcolor="#23b7e5" direction="down" height="150" scrollamount="2" style="border: 2px solid #000000; text-align: center; color: #fbfbfc; font-size: 30px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;" width="300">Бегущая строка в рамочке на цветном фоне </marquee>
Бегущая строка в рамочке на цветном фоне

Бегущая строка останавливается при наведении:

Код:
<marquee onmouseout="this.start()" onmouseover="this.stop()"><span style="color: white;"><b>Бегущая строка останавливается при наведении</b></span></marquee>
Бегущая строка останавливается при наведении

Бегущая строка в html с картинками:

Код:
<marquee><img src="Ссылка на картинку" /></marquee>


ссылка на картинку:
Код:
https://imgur.com/0cGhn4m.gif

Ссылка в бегущей строке:
Код:
<marquee> Текст перед ссылкой <a href="url адрес ссылки" title="Всплывающий текст при наведении курсора на ссылку">текст ссылки</a></marquee>
Текст перед ссылкой НАЖМИ НА МЕНЯ







 
Последнее редактирование:
Сверху Снизу