При разработке сайта интересным элементом дизайна, привлекающим внимание, может стать бегущая строка. Особенно удобно размещать с её помощью краткие новости, информацию о скидках, распродажах и т.п. Кроме того, бегущая строка – самый простой способ создания анимации на сайте. На самом деле вы можете сделать “бегущими” не только слова, но и любые другие элементы страницы – изображения (включая анимированные), таблицы, элементы форм и т.д. Причём перемещение объекта может быть как по горизонтали, так и по вертикали.
Вы можете использовать её в самых разных ситуациях:
в качестве информера для новостей, обновлений,
в качестве разделителей для текста,
в рекламных целях,
для визуального украшения и т.д.
Чтобы сделать эффект бегущего текста, используется контейнер <marquee>…</marquee> с определёнными атрибутами. Давайте сначала посмотрим, какие атрибуты за что отвечают, а потом будем применять:
behavior – задает тип движения содержимого контейнера <marquee>, может принимать значения:
alternate – объект перемещается между правым и левым краем области;
scroll – объект перемещается в направлении, заданным атрибутом direction, затем скрывается за пределами области, после чего начинает движение с начала;
slide – объект перемещается в направлении, заданным атрибутом direction, доходит до края области и останавливается.
bgcolor – цвет фона контейнера, по умолчанию установлен цвет фона страницы,
direction – указывает направление движения содержимого контейнера, может принимать занчения:
down – сверху вниз,
up – снизу вверх,
left – справа налево (установлено по умолчанию),
right – слева направо.
height – высота области прокрутки (в пикселах или процентах),
width – ширина области прокрутки (в пикселах или процентах),
hspace – горизонтальные поля вокруг контейнера (целое положительное число),
vspace – вериткальные поля вокруг контейнера (целое положительное число),
loop – задаёт количество раз прокрутки содержимого (любое целое положительное число или -1 для бесконечного воспроизведения движения),
scrollamount – задаёт скорость движения контента: устанавливает расстояние в пикселах между старым и новым положениями, которое влияет на скорость движения и плавность хода. По умолчанию установлено 6.
Простая бегущая строка с текстом:
На нашем сайте появились новые статьи!
На нашем сайте появились новые статьи!
Бегущая строка с картинкой.
Если прикрепить к зайчику ленту с каким-нибудь объявлением, то получится прикольный информер, который будет активно привлекать внимание посетителей сайта.
Вертикальная бегущая строка с картинкой или текстом.
Вертикальная бегущая строка с прокруткой сверху вниз.
Вертикальная бегущая строка с прокруткой снизу вверх.
