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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

На нашем сайте появились новые статьи!

На нашем сайте появились новые статьи!

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

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

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

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

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

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

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

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

Заказать создание сайта >>
от SEOKlub
+- (Пока нет голосов)
Loading...Loading...
Автор: Никита Смирнов
Статьи по теме:
Читайте нас:
по электронной почте


 

Яндекс.Метрика
SEOklub.ru © 2009 - 2016. Копирование материалов без активной ссылки на сайт запрещено.
Задать вопрос
Позвонить вам
Предложить тему статьи
Заказать услугу
Заказать сайт
Заказать услугу