Как на сайте сделать бегущую строку с помощью HTML
Тег — <marquee>. Изначально этот тег был разработан для браузера Internet Explorer, но со временем и другие браузеры стали поддерживать его применение.
Бегущая строка - элемент в веб-дизайне для привлечения внимания, чаще используется в рекламных целях. Бегущая строка это просто напросто текст который движется, слева направо, справа налево или вверх вниз.
В бегущую строку можно вставить новость, объявление, приветствие, отобразить текущее время и дату и много много другой интересной информации.
Пример:
По умолчанию бегущая строка движется только справа налево, чтобы изменить направление строки надо к тегу добавить атрибут direction со значением right
Так же можно задавать стили тексту:
Подставив значение up для атрибута direction мы заставим строчку двигаться снизу вверх:
Так же можно увеличить или уменьшить скорость прокрутки бегущей строки, для этого мы используем атрибут scrollamount. В кавычках указываем число от 1.
Сделаем бегущую строку в рамочке на цветном фоне:
Бегущая строка останавливается при наведении:
Бегущая строка в 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>
Последнее редактирование: