Анимация для сайта. Бегущая строка HTML, тег marquee.
Итак, знакомьтесь! Волшебный тег — <marquee>.
Изначально этот тег был разработан для браузера Internet Explorer, но со временем и другие браузеры стали поддерживать его применение.
Атрибуты
*width — ширина поля бегущей строки в пикселах или процентах от ширины окна.
*height — высота поля бегущей строки (в пикселах).
*hspace, vspace — интервалы по горизонтали и вертикали между текстом строки и краями ее поля (в пикселах).
*aligh —положение текста бегущей строки в ее поле; возможные аргументы.
*top (вверху).
*bottom (внизу).
*middle (посередине).
*direction — определяет направление движения; возможные аргументы.
*left (справа налево).
*right (слева направо).
*behavior — характер движения строки; возможные аргументы.
*scroll — текст появляется от одного края и скрывается за другим.
*slide — строка вытягивается из одного края поля и останавливается у другого края.
*alternate — переменное направление движения, от одного края к другому, а затем обратно.
*loop — количество повторений текста в бегущей строке, задаваемое числом; если необходимо «бесконечное» количество повторений, то следует задать аргумент в виде ключевого слова infinity.
Атрибут loop не влияет на поведение бегущей строки, если для атрибута behavior заданы аргументы alternate или slide.
*scrollamount — устанавливает длину (в пикселах. При большом значении параметра текст движется рывками, при малом — замедленно.
*scrolldelay — величина паузы между тактами перемещения текста в миллисекундах.
*bgcolor — устанавливает цвет поля бегущей строки, задаваемый шестнадцатеричным числом или именем.
Коды и примеры!
Давайте заставим строку двигаться. Для этого в редакторе HTML режиме вставляем следующее:
<marquee>Бегущая строка</marquee>
Результат:
Строчка стала двигаться. Теперь давайте сделаем строчку немного заметнее, добавив стили.
<marquee style="color: #
FFA500; font-size: 40px;
font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>
Результат:
Применив атрибут direction со значением right мы изменим направление движения бегущей строки и она будет двигаться справа налево:
<marquee direction="right" style="color: #
FFA500; font-size: 40px; font-weight: bolder; line-height: 150%;
text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>
Результат:
По умолчанию тегу <marquee> присвоен атрибут direction со значением left, поэтому строчка без применения атрибутов движется слева направо.
Подставив значение up для атрибута direction мы заставим строчку двигаться снизу вверх:
<marquee direction="up" style="color: #FFA500
; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>
Результат:
Значение down укажет строчке двигаться сверху вниз:
<marquee direction="down" style="color: #
FFA500; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>
Результат:
Теперь давайте немного остановимся и разберемся как работает тег <marquee>.
Анимация происходит за счет постоянного затирания информации и отображения ее на новом месте. С помощью значений для атрибута <marquee> мы устанавливаем расстояние в пикселях между стертым и новым положением строчки, тем самым влияя на скорость и плавность ее движения.
По молчанию стоит значение 6, но если задать значение 1, то расстояние между старым и новым положением строчки будет равняться 1 пикселю, что обеспечит медленный и плавный ход бегущей строки:
<marquee scrollamount="1" style="color: #FFA500
; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>
Результат:
Атрибут behavior задает способ прокрутки внутри заданного блока и по умолчанию имеет значение scroll, что заставляет бегущую строчку скрываться из виду и начинать движение сначала.
Но если подставить значение alternate, то строчка не будет скрываться из виду, а дойдя до границ блока начнет движение в обратную сторону:
<marquee behavior="alternate" scrollamount="10"
style="color: #FFA500; font-size: 40px; font-weight: bolder; line-height: 150%;
text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>
Результат:
Атрибут height задает высоту блока. По умолчанию стоит 12 пикселей, но давайте ее изменим и немного добавим к скорости прокрутки бегущей строки:
<marquee height="100"
direction="up" style="color: #
FFA500; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>
Результат:
Атрибут width отвечает за ширину блока. Можно применять атрибуты width и height вместе, чтобы задать желаемые границы блока. Для наглядности добавим рамку в стили и чуть-чуть замедлим скорость прокрутки:
<marquee width="300" height=
"300" scrollamount="15"
direction=
"up" style="border: 2px solid #000000; color: #FFA500
; font-size: 40px;
font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;"
>Бегущая строка</marquee>
Результат:
Теперь давайте зададим фон для бегущей строки. Для этого применим атрибут bgcolor и поставим для него желтый цвет фона:
<marquee bgcolor="#008b8b" width="300" height="300" scrollamount="12"
direction=
"down" style="border: 2px solid #000000; color: #
FFA500; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>
Результат:
Теперь попробуем сделать так, чтобы бегущая строка двигалась в разные стороны.
<marquee width="49%" style="color: #
FFA500; font-size: 40px; font-weight: bolder; line-height: 150%;
text-shadow: #000000 0px 1px 1px;"br>>Бегущая строка</marquee><marquee width=
"49%" direction="right"
style="color: #FFA500; font-size: 40px; font-weight: bolder; line-height: 150%;
text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>
Результат:
Вот простой пример анимации изображения:
<marquee direction="right"><img src="Путь до катринки" /></marquee>
Результат:
Конечно сама картинка анимирована в фотошопе, но мы ее заставили перемещаться по странице, создавая эффект движения.
Вот еще интересный пример, с помощью тега marquee можно создать простенький слайдер:
<marquee direction="right" scrollamount="10"><img src="Путь до картинки №1"/><img src="Путь до картинки №2"
/><img src="Путь до картинки №3"/><img src="Путь до картинки №4"
/><img src="Путь до картинки №5"/></marquee>
Результат:
| 
