Сделать бегущую строку на сайте.

При разработке сайта интересным элементом дизайна, привлекающим внимание, может стать бегущая строка. Особенно удобно размещать с её помощью краткие новости, информацию о скидках, распродажах и т.п. Кроме того, бегущая строка — самый простой способ создания анимации на сайте. На самом деле вы можете сделать «бегущими» не только слова, но и любые другие элементы страницы — изображения (включая анимированные), таблицы, элементы форм и т.д. Причём перемещение объекта может быть как по горизонтали, так и по вертикали.

Вы можете использовать её в самых разных ситуациях:

• в качестве информера для новостей, обновлений,

• в качестве разделителей для текста,

• в рекламных целях,

• для визуального украшения и т.д.

Чтобы сделать эффект бегущего текста, используется контейнер <marquee>…</marquee> с определёнными атрибутами. Давайте сначала посмотрим, какие атрибуты за что отвечают, а потом будем применять:

• behavior — задает тип движения содержимого контейнера <marquee>, может принимать значения:

  • alternate — объект перемещается между правым и левым краем области;

  • scroll — объект перемещается в направлении, заданным атрибутом direction, затем скрывается за пределами области, после чего начинает движение с начала;

  • slide — объект перемещается в направлении, заданным атрибутом direction, доходит до края области и останавливается.

• bgcolor — цвет фона контейнера, по умолчанию установлен цвет фона страницы,

• direction — указывает направление движения содержимого контейнера, может принимать занчения:

  • down — сверху вниз,

  • up — снизу вверх,

  • left — справа налево (установлено по умолчанию),

  • right — слева направо.

• height — высота области прокрутки (в пикселах или процентах),

• width — ширина области прокрутки (в пикселах или процентах),

• hspace — горизонтальные поля вокруг контейнера (целое положительное число),

• vspace — вериткальные поля вокруг контейнера (целое положительное число),

• loop — задаёт количество раз прокрутки содержимого (любое целое положительное число или -1 для бесконечного воспроизведения движения),

• scrollamount — задаёт скорость движения контента: устанавливает расстояние в пикселах между старым и новым положениями, которое влияет на скорость движения и плавность хода. По умолчанию установлено 6.

Примеры создания бегущей строки на сайте.

Простая бегущая строка с текстом:

Бегущая строка с картинкой.

Если прикрепить к зайчику ленту с каким-нибудь объявлением, то получится прикольный информер, который будет активно привлекать внимание посетителей сайта.

Вертикальная бегущая строка с картинкой или текстом.

Вертикальная бегущая строка с прокруткой сверху вниз.

Вертикальная бегущая строка с прокруткой снизу вверх.