Тема: Анимация и бегущая строка в HTML
Бегущая строка - элемент в веб-дизайне для привлечения внимания, чаще используется в рекламных целях. Бегущая строка это просто напросто текст который движется, слева направо, справа налево или вверх вниз.
В бегущую строку можно вставить новость, объявление, приветствие, отобразить текущее время и дату и много много другой интересной информации.
Как сделать бегущую строку html на сайте
Создать бегущую строку не составит большого труда и времени. Что бы заставить текст двигаться без фотошопа был разработан и создан тег html < marquee >, сначала специально для для браузера Internet Explorer, а затем и все остальные браузеры начали обрабатывать и поддерживать тег.
Что самое приятное и удивительное это очень маленький и коротенький тег, который приводит в движение не только текст, но и картинки. Чудеса да и только!
К примеру, что бы текст двигался справа налево нужно вставить код:
<marquee>Тут вставляем текст бегущей строки</marquee>
Приветствие:
В принципе бегущую строку можно вставить куда душа пожелает: в футер, сайдбар, под шапкой блога или в саму шапку.
Можно настроить бегущую строку добавив стили и атрибуты. По умолчанию бегущая строка движется только справа налево, чтобы изменить направление строки надо к тегу добавить атрибут direction со значением right
<marquee direction="right">Бегущая строка cлева направо</marquee>
Что бы текст не исчезал за границы и двигался туда-сюда нужно добавить атрибут behavior со значением alternate
<marquee behavior="alternate">Бегущая строка перемещается между правым и левым краем</marquee>
<marquee behavior="alternate" bgcolor="#e20b0b" direction="right" style="color: #ffffff; font-size: 20px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;"onmousedown="this.stop()" onmouseup="this.start()">Туда-сюда на цветном фоне</marquee>
|
|
Бегущая строка останавливается при наведении
<marquee onmouseout="this.start()" onmouseover="this.stop()"><span style="color: red;"><b>Бегущая строка останавливается при наведении</b></span></marquee>
А теперь добавим стили css и украсим нашу бегущую строку, получится цветная бегущая строка:
<marquee style="color:#470dd9; font-size: 20px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Цветная бегущая строка</marquee>
Цветная бегущая строка движется слева направо:
<marquee direction="right" style="color: #ad0dd9; font-size: 20px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Цветная бегущая строка слева направо</marquee>
Настройки:
color: #ad0dd9 - цвет текста бегущей строки
font-size: 20px - размер шрифта
Сделаем бегущую строку на цветном фоне:
<marquee bgcolor="#e20b0b">Бегущая строка на цветном фоне</marquee>
bgcolor - цвет фона
Цветная бегущая строка
Чтобы бегущая строка двигалась снизу вверх добавим атрибут direction со значением up:
<marquee direction="up" style="color:#f2132d; font-size: 30px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка снизу вверх</marquee>
И сразу же добавим еще один атрибут heigh и настроим высоту блока:
<marquee height="150" direction="up" style="color:#0F9D58; font-size: 30px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>
Настройки:
height="150"- высота блока
color:#0F9D58- цвет текста бегущей строки
font-size: 30px- размер шрифта
А теперь заставим бегущую строку двигаться сверху вниз. К атрибуту direction добавим значение down
|
|
<marquee height="150" direction="down" style="color:#1C3850; font-size: 20 px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка сверху вниз</marquee>
Что бы регулировать скорость прокрутки бегущей строки добавим атрибут scrolldelay:
<marquee scrolldelay="60" style="color:#0F9D58; font-size: 30px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>
Настройка:
scrolldelay="60" - изменяем цифры и устанавливаем свою скорость прокрутки
Что бы указать границы блока добавим к стилям рамочку, добавим атрибуты width и height.
height - это высота блока
width - ширина
scrollamount - атрибут который влияет на скорость движения, чем выше число тем быстрее движется текст.
<marquee direction="down" height="150" scrollamount="3" style="border: 2px solid #000000; text-align: center; color: #f2132d; font-size: 30px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;" width="300">Бегущая строка в рамочке</marquee>
Сделаем бегущую строку в рамочке на цветном фоне: добавим атрибут bgcolor
<marquee bgcolor="#e20b0b" 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>