|
Автор | Сообщение |
---|
T-REX Двукратный победитель турнира "Планшетомания"
Сообщения : 10605 1978-01-02 2013-01-20 Возраст : 46
| Тема: Создание бегущей строки Сб 14 Фев - 9:32 | |
| За двигающийся текст отвечает тег - Код:
-
<marquee> На месте "тут вставляем текст" вставляем любой текст, смайлик, картинку или анимацию и наслаждаемся их движением - Код:
-
<marquee>тут вставляем текст</marquee> результат:
Последний раз редактировалось: T-REX (Сб 14 Фев - 9:43), всего редактировалось 2 раз(а) |
|
| |
T-REX Двукратный победитель турнира "Планшетомания"
Сообщения : 10605 1978-01-02 2013-01-20 Возраст : 46
| Тема: Re: Создание бегущей строки Сб 14 Фев - 9:41 | |
| Теперь сделаем строчку немного заметнее, добавив стили - Код:
-
<marquee style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Всем привет :)</marquee> |
|
| |
T-REX Двукратный победитель турнира "Планшетомания"
Сообщения : 10605 1978-01-02 2013-01-20 Возраст : 46
| Тема: Re: Создание бегущей строки Сб 14 Фев - 9:43 | |
| Применив атрибут direction со значением right мы изменим направление движения бегущей строки и она будет двигаться справа налево: - Код:
-
<marquee direction="right" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Всем привет :)</marquee> По умолчанию тегу - Код:
-
<marquee> присвоен атрибут direction со значением left, поэтому строчка без применения атрибутов движется слева направо.
Последний раз редактировалось: T-REX (Сб 14 Фев - 12:25), всего редактировалось 1 раз(а) |
|
| |
T-REX Двукратный победитель турнира "Планшетомания"
Сообщения : 10605 1978-01-02 2013-01-20 Возраст : 46
| Тема: Re: Создание бегущей строки Сб 14 Фев - 9:45 | |
| Подставив значение up для атрибута direction мы заставим строчку двигаться снизу вверх: - Код:
-
<marquee direction="up" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Всем привет :)</marquee> Значение down укажет строчке двигаться сверху вниз - Код:
-
<marquee direction="down" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>
Последний раз редактировалось: T-REX (Сб 14 Фев - 12:25), всего редактировалось 3 раз(а) |
|
| |
T-REX Двукратный победитель турнира "Планшетомания"
Сообщения : 10605 1978-01-02 2013-01-20 Возраст : 46
| Тема: Re: Создание бегущей строки Сб 14 Фев - 9:47 | |
| Теперь увеличим скорость прокрутки бегущей строки, для этого мы используем атрибут scrollamount. В кавычках указываем число от 1. Например: - Код:
-
<marquee scrollamount="30" direction="down" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Всем привет :)</marquee>
Последний раз редактировалось: T-REX (Сб 14 Фев - 12:26), всего редактировалось 3 раз(а) |
|
| |
T-REX Двукратный победитель турнира "Планшетомания"
Сообщения : 10605 1978-01-02 2013-01-20 Возраст : 46
| Тема: Re: Создание бегущей строки Сб 14 Фев - 9:49 | |
| Теперь немного остановимся и разберемся как работает тег "marquee". Анимация происходит за счет постоянного затирания информации и отображения ее на новом месте. С помощью значений для атрибута "marquee" мы устанавливаем расстояние в пикселях между стертым и новым положением строчки, тем самым влияя на скорость и плавность ее движения. По молчанию стоит значение 6, но если задать значение 1, то расстояние между старым и новым положением строчки будет равняться 1 пикселю, что обеспечит медленный и плавный ход бегущей строки: - Код:
-
<marquee scrollamount="1" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Всем привет :)</marquee> |
|
| |
T-REX Двукратный победитель турнира "Планшетомания"
Сообщения : 10605 1978-01-02 2013-01-20 Возраст : 46
| Тема: Re: Создание бегущей строки Сб 14 Фев - 9:52 | |
| Атрибут behavior задает способ прокрутки внутри заданного блока и по умолчанию имеет значение scroll, что заставляет бегущую строчку скрываться из виду и начинать движение сначала. Но если подставить значение alternate, то строчка не будет скрываться из виду, а дойдя до границ блока начнет движение в обратную сторону: - Код:
-
<marquee behavior="alternate" scrollamount="10" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Всем привет :)</marquee> |
|
| |
T-REX Двукратный победитель турнира "Планшетомания"
Сообщения : 10605 1978-01-02 2013-01-20 Возраст : 46
| Тема: Re: Создание бегущей строки Сб 14 Фев - 9:54 | |
| Значение slide для атрибута behavior дает команду бегущей строчке дойти до границы блока и остановиться: - Код:
-
<marquee behavior="slide" scrollamount="10" style="color: #D9470D; 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: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Всем привет :)</marquee>
Последний раз редактировалось: T-REX (Сб 14 Фев - 17:15), всего редактировалось 2 раз(а) |
|
| |
anna4842 Капитан клана "Russia" /1000/ Мисс Очарование 2015 /1000/
Сообщения : 8577 1975-01-11 2013-02-15 Возраст : 49 Карелия
| |
| |
T-REX Двукратный победитель турнира "Планшетомания"
Сообщения : 10605 1978-01-02 2013-01-20 Возраст : 46
| Тема: Re: Создание бегущей строки Сб 14 Фев - 17:22 | |
| Анна спасибо за дополнение и мы продолжаем обучение и усложним задачи Атрибут width отвечает за ширину блока. Можно применять атрибуты width и height вместе, чтобы задать желаемые границы блока. Для наглядности добавим рамку в стили и чуть-чуть замедлим скорость прокрутки: - Код:
-
<marquee width="300" height="300" scrollamount="15" direction="up" style="border: 2px solid #000000; color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Всем привет :)</marquee> Теперь давайте зададим фон для бегущей строки. Для этого применим атрибут bgcolor и поставим для него желтый цвет фона: - Код:
-
<marquee bgcolor="#F5FF37" width="350" height="300" scrollamount="12" direction="down" style="border: 2px solid #000000; color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Всем привет :)</marquee> Теперь попробуем сделать так, чтобы бегущая строка двигалась в разные стороны. - Код:
-
<marquee width="49%" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Всем привет :)</marquee><marquee width="49%" direction="right" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Всем привет :)</marquee> Устанавливаем время задержки анимации с помощью атрибута scrolldelay, подставляя числовые значения. По умолчанию стоит 80 миллисекунд: - Код:
-
<marquee scrolldelay="30" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Всем привет :)</marquee> Атрибут scrolldelay — это еще один инструмент, с помощью которого мы можем регулировать скорость прокрутки. |
|
| |
T-REX Двукратный победитель турнира "Планшетомания"
Сообщения : 10605 1978-01-02 2013-01-20 Возраст : 46
| Тема: Re: Создание бегущей строки Сб 14 Фев - 17:33 | |
| Ну и в заключении как можно использовать эффект бегущей строки Простой пример анимации изображения. Возьмем вот такую анимацию доступную по ссылке http://s015.radikal.ru/i332/1502/18/fd38d6479a77.gif и вставим ее в бегущую строку - Код:
-
<marquee direction="right"><img src="Путь до картинки" /></marquee> Получится следующее: Конечно сама картинка анимирована в фотошопе, но мы ее заставили перемещаться по странице, создавая эффект движения. Вот еще интересный пример, с помощью тега marquee можно создать простенький слайдер имея изображения: , и - Код:
-
<marquee direction="right" scrollamount="10"><img src="Путь до картинки №1"/><img src="Путь до картинки №2" /><img src="Путь до картинки №3"/></marquee> Можно каждую картинку в слайдере сделать ссылкой: - Код:
-
<marquee scrollamount="10"><a href="URL статьи №1"><img src="Путь до изображения №1" /></a><a href="URL статьи №2"><img src="Путь до изображения №2" /></a><a href="URL статьи №3"><img src="Путь до изображения №3" /></a><a href="URL статьи №"4"><img src="Путь до изображения №4" /></a><a href="URL статьи №5"2"><img src="Путь до изображения №5" /></a></marquee> |
|
| |
|