Главная | Мой профиль | Регистрация | Выход | Вход Вы вошли как Гость | Группа "Гости" | Приветствую Вас Гость | RSS
Меню сайта
Катигории
Скрипты [2]
Таблицы [1]
jQuery [1]
Шаблоны сайтов [2]
Меню для сайтов [2]
Текст [1]
Linkslot
Купить ссылку здесь за руб.
Поставить к себе на сайт
Linkslot
Оплаченная реклама
Форма входа
Socialchance
Linkslot
Видео
Главная » 2015 » Январь » 29 » Бегущая строка HTML
15:56
Бегущая строка HTML

Анимация для сайта. Бегущая строка HTML, тег marquee.

Итак, знакомьтесь! Волшебный тег — <marquee>.

Изначально этот тег был разработан для браузера Internet Explorer, но со временем и другие браузеры стали поддерживать его применение.

 

Атрибуты


*width — ширина поля бегущей строки в пикселах или процентах от ширины окна.

*height — высота поля бегущей строки (в пикселах).

*hspace, vspace — интервалы по горизонтали и вертикали между текстом строки и краями ее поля (в пикселах).

*aligh —положение текста бегущей строки в ее поле; возможные аргументы.

*top (вверху).


*bottom (внизу).

*middle (посередине).

*direction — определяет направление движения; возможные аргументы.

*left (справа налево).

*right (слева направо).

*behavior — характер движения строки; возможные аргументы.

*scroll — текст появляется от одного края и скрывается за другим.

*slide — строка вытягивается из одного края поля и останавливается у другого края.

*alternate — переменное направление движения, от одного края к другому, а затем обратно.

*loop — количество повторений текста в бегущей строке, задаваемое числом; если необходимо «бесконечное» количество повторений, то следует задать аргумент в виде ключевого слова infinity.

Атрибут loop не влияет на поведение бегущей строки, если для атрибута behavior заданы аргументы alternate или slide.

*scrollamount — устанавливает длину (в пикселах. При большом значении параметра текст движется рывками, при малом — замедленно.

*scrolldelay — величина паузы между тактами перемещения текста в миллисекундах.

*bgcolor — устанавливает цвет поля бегущей строки, задаваемый шестнадцатеричным числом или именем.

 

 

Коды и примеры!

 

Давайте заставим строку двигаться. Для этого в редакторе  HTML режиме вставляем следующее:

<marquee>Бегущая строка</marquee>

 

Результат:

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

 

Строчка стала двигаться. Теперь давайте сделаем строчку немного заметнее, добавив стили.

<marquee style="color: #
FFA500; font-size: 40px; 
font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>

 

Результат:

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

 

Применив атрибут direction со значением right мы изменим направление движения бегущей строки и она будет двигаться справа налево:

<marquee direction="right" style="color: #
FFA500; font-size: 40px; font-weight: bolder; line-height: 150%; 
 text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>

 

Результат:

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

 

По умолчанию тегу <marquee> присвоен атрибут direction со значением left, поэтому строчка без применения атрибутов движется слева направо.

Подставив значение up для атрибута direction мы заставим строчку двигаться снизу вверх:

<marquee direction="up" style="color: #FFA500
; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>

 

Результат:

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

 

Значение down укажет строчке двигаться сверху вниз:

<marquee direction="down"  style="color: #
FFA500; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>

 

Результат:

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

 

Теперь давайте немного остановимся и разберемся как работает тег <marquee>.

Анимация происходит за счет постоянного затирания информации и отображения ее на новом месте. С помощью значений для атрибута <marquee> мы устанавливаем расстояние в пикселях между стертым и новым положением строчки, тем самым влияя на скорость и плавность ее движения.

По молчанию стоит значение 6, но если задать значение 1, то расстояние между старым и новым положением строчки будет равняться 1 пикселю, что обеспечит медленный и плавный ход бегущей строки:

<marquee scrollamount="1" style="color: #FFA500
; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>

 

Результат:

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

 

Атрибут behavior задает способ прокрутки внутри заданного блока и по умолчанию имеет значение scroll, что заставляет бегущую строчку скрываться из виду и начинать движение сначала.

Но если подставить значение alternate, то строчка не будет скрываться из виду, а дойдя до границ блока начнет движение в обратную сторону:

<marquee behavior="alternate" scrollamount="10" 
style="color: #FFA500; font-size: 40px; font-weight: bolder; line-height: 150%; 
text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>

 

Результат:

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

 

Атрибут height задает высоту блока. По умолчанию стоит 12 пикселей, но давайте ее изменим и немного добавим к скорости прокрутки бегущей строки:

<marquee height="100"
direction="up" style="color: #
FFA500; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>

 

Результат:

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

 

Атрибут width отвечает за ширину блока. Можно применять атрибуты width и height вместе, чтобы задать желаемые границы блока. Для наглядности добавим рамку в стили и чуть-чуть замедлим скорость прокрутки:

<marquee width="300" height=
"300" scrollamount="15" 
direction=
"up" style="border: 2px solid #000000; color: #FFA500
; font-size: 40px; 
font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;"
>Бегущая строка</marquee>

 

Результат:

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

 

Теперь давайте зададим фон для бегущей строки. Для этого применим атрибут bgcolor и поставим для него желтый цвет фона:

<marquee bgcolor="#008b8b" width="300" height="300" scrollamount="12" 
direction=
"down" style="border: 2px solid #000000; color: #
FFA500; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>

 

Результат:

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

 

Теперь попробуем сделать так, чтобы бегущая строка двигалась в разные стороны.

<marquee width="49%" style="color: #
FFA500; font-size: 40px; font-weight: bolder; line-height: 150%; 
text-shadow: #000000 0px 1px 1px;"br>>Бегущая строка</marquee><marquee width=
"49%" direction="right" 
style="color: #FFA500; font-size: 40px; font-weight: bolder; line-height: 150%;
 text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>

 

Результат:

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

 

Вот простой пример анимации изображения:

<marquee direction="right"><img src="Путь до катринки" /></marquee>

 

Результат:

 

Конечно сама картинка анимирована в фотошопе, но мы ее заставили перемещаться по странице, создавая эффект движения.

Вот еще интересный пример, с помощью тега marquee можно создать простенький слайдер:

<marquee direction="right" scrollamount="10"><img src="Путь до картинки №1"/><img src="Путь до картинки №2"
 /><img src="Путь до картинки №3"/><img src="Путь до картинки №4"
/><img src="Путь до картинки №5"/></marquee>

 

Результат:

 

Категория: Скрипты | Просмотров: 1662 | Добавил: ret123r | Теги: бегущая строка html, бегущая строка html с картинкой, Атрибуты, коды и примеры, результат | Рейтинг: 4.0/1
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Поиск
Статистика
Linkslot
Бесплатные СМС
Мини-чат
Link Wall
Бесплатное
WMlink
© 2012-2017 - ret123r123r.narod.ru


 Rambler's Top100 Рейтинг@Mail.ru Яндекс.Метрика Проверка тИЦ и PR     
 
 
 %