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