SeoKlub
Колодезный пер., д. 2А, стр. 1 107076 Москва, Россия
+7 (499)340-64-04, +7 (499)340-64-04, info@seoklub.ru
Первый слайд
Второй слайд

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

Главная Создание сайтов Веб-дизайн Примеры создания бегущей строки на сайте

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

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

  • в качестве информера для новостей, обновлений,
  • в качестве разделителей для текста,
  • в рекламных целях,
  • для визуального украшения и т.д.

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

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

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

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

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

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

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

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

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

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

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

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

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


Заказать сайт недорого и быстро

Читайте нас:

VKTelegram

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