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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Комментарии

Извините, на данный момент нет комментариев!

Оставить комментарий

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