ФорумСоздание бегущей строки 28846327_sПоследние изображенияПоискРегистрацияВход

Поделиться
 

 Создание бегущей строки

Предыдущая тема Следующая тема Перейти вниз 
АвторСообщение
T-REX
Двукратный победитель турнира "Планшетомания"
Двукратный победитель турнира
T-REX


Мужчина Козерог Змея
Сообщения Сообщения : 10605
Дата рождения 1978-01-02
Дата регистрации 2013-01-20
Возраст Возраст : 46

Создание бегущей строки Empty
СообщениеТема: Создание бегущей строки   Создание бегущей строки Icon_minitimeСб 14 Фев - 9:32

За двигающийся текст отвечает тег

Код:
<marquee>

На месте "тут вставляем текст" вставляем любой текст, смайлик, картинку или анимацию и наслаждаемся их движением Smile

Код:
<marquee>тут вставляем текст</marquee>

результат:

Всем привет Smile


Последний раз редактировалось: T-REX (Сб 14 Фев - 9:43), всего редактировалось 2 раз(а)
Вернуться к началу Перейти вниз
T-REX
Двукратный победитель турнира "Планшетомания"
Двукратный победитель турнира
T-REX


Мужчина Козерог Змея
Сообщения Сообщения : 10605
Дата рождения 1978-01-02
Дата регистрации 2013-01-20
Возраст Возраст : 46

Создание бегущей строки Empty
СообщениеТема: Re: Создание бегущей строки   Создание бегущей строки Icon_minitimeСб 14 Фев - 9:41

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

Код:
<marquee style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Всем привет :)</marquee>

Всем привет Smile
Вернуться к началу Перейти вниз
T-REX
Двукратный победитель турнира "Планшетомания"
Двукратный победитель турнира
T-REX


Мужчина Козерог Змея
Сообщения Сообщения : 10605
Дата рождения 1978-01-02
Дата регистрации 2013-01-20
Возраст Возраст : 46

Создание бегущей строки Empty
СообщениеТема: Re: Создание бегущей строки   Создание бегущей строки Icon_minitimeСб 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>

Всем привет Smile

По умолчанию тегу

Код:
<marquee>

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


Последний раз редактировалось: T-REX (Сб 14 Фев - 12:25), всего редактировалось 1 раз(а)
Вернуться к началу Перейти вниз
T-REX
Двукратный победитель турнира "Планшетомания"
Двукратный победитель турнира
T-REX


Мужчина Козерог Змея
Сообщения Сообщения : 10605
Дата рождения 1978-01-02
Дата регистрации 2013-01-20
Возраст Возраст : 46

Создание бегущей строки Empty
СообщениеТема: Re: Создание бегущей строки   Создание бегущей строки Icon_minitimeСб 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>

Всем привет Smile

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

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

Всем привет Smile


Последний раз редактировалось: T-REX (Сб 14 Фев - 12:25), всего редактировалось 3 раз(а)
Вернуться к началу Перейти вниз
T-REX
Двукратный победитель турнира "Планшетомания"
Двукратный победитель турнира
T-REX


Мужчина Козерог Змея
Сообщения Сообщения : 10605
Дата рождения 1978-01-02
Дата регистрации 2013-01-20
Возраст Возраст : 46

Создание бегущей строки Empty
СообщениеТема: Re: Создание бегущей строки   Создание бегущей строки Icon_minitimeСб 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>

Всем привет Smile


Последний раз редактировалось: T-REX (Сб 14 Фев - 12:26), всего редактировалось 3 раз(а)
Вернуться к началу Перейти вниз
T-REX
Двукратный победитель турнира "Планшетомания"
Двукратный победитель турнира
T-REX


Мужчина Козерог Змея
Сообщения Сообщения : 10605
Дата рождения 1978-01-02
Дата регистрации 2013-01-20
Возраст Возраст : 46

Создание бегущей строки Empty
СообщениеТема: Re: Создание бегущей строки   Создание бегущей строки Icon_minitimeСб 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>

Всем привет Smile
Вернуться к началу Перейти вниз
T-REX
Двукратный победитель турнира "Планшетомания"
Двукратный победитель турнира
T-REX


Мужчина Козерог Змея
Сообщения Сообщения : 10605
Дата рождения 1978-01-02
Дата регистрации 2013-01-20
Возраст Возраст : 46

Создание бегущей строки Empty
СообщениеТема: Re: Создание бегущей строки   Создание бегущей строки Icon_minitimeСб 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>

Всем привет Smile
Вернуться к началу Перейти вниз
T-REX
Двукратный победитель турнира "Планшетомания"
Двукратный победитель турнира
T-REX


Мужчина Козерог Змея
Сообщения Сообщения : 10605
Дата рождения 1978-01-02
Дата регистрации 2013-01-20
Возраст Возраст : 46

Создание бегущей строки Empty
СообщениеТема: Re: Создание бегущей строки   Создание бегущей строки Icon_minitimeСб 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>

Всем привет Smile

Атрибут 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>

Всем привет Smile


Последний раз редактировалось: T-REX (Сб 14 Фев - 17:15), всего редактировалось 2 раз(а)
Вернуться к началу Перейти вниз
anna4842
Капитан клана "Russia" /1000/ Мисс Очарование 2015 /1000/
Капитан клана
anna4842


Женщина Козерог Тигр
Сообщения Сообщения : 8577
Дата рождения 1975-01-11
Дата регистрации 2013-02-15
Возраст Возраст : 49
Откуда Карелия

Создание бегущей строки Empty
СообщениеТема: Re: Создание бегущей строки   Создание бегущей строки Icon_minitimeСб 14 Фев - 15:38

При этом если вместо слов (надписи) установить картинку, то она не пройдёт "сквозь стену", а дойдёт до неё и исчезнет. Сквозь стену проходит только то, что вы пишите, но никак не изображения. Пример ниже:

Создание бегущей строки 9c95f695f601
Вернуться к началу Перейти вниз
T-REX
Двукратный победитель турнира "Планшетомания"
Двукратный победитель турнира
T-REX


Мужчина Козерог Змея
Сообщения Сообщения : 10605
Дата рождения 1978-01-02
Дата регистрации 2013-01-20
Возраст Возраст : 46

Создание бегущей строки Empty
СообщениеТема: Re: Создание бегущей строки   Создание бегущей строки Icon_minitimeСб 14 Фев - 17:22

Анна спасибо за дополнение  flower  и мы продолжаем обучение и усложним задачи Smile

Атрибут 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>

Всем привет Smile

Теперь давайте зададим фон для бегущей строки. Для этого применим атрибут 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>

Всем привет Smile

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

Код:
<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>

Всем привет SmileВсем привет Smile

Устанавливаем время задержки анимации с помощью атрибута scrolldelay, подставляя числовые значения. По умолчанию стоит 80 миллисекунд:

Код:
<marquee scrolldelay="30" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Всем привет :)</marquee>

Всем привет Smile

Атрибут scrolldelay — это еще один инструмент, с помощью которого мы можем регулировать скорость прокрутки.
Вернуться к началу Перейти вниз
T-REX
Двукратный победитель турнира "Планшетомания"
Двукратный победитель турнира
T-REX


Мужчина Козерог Змея
Сообщения Сообщения : 10605
Дата рождения 1978-01-02
Дата регистрации 2013-01-20
Возраст Возраст : 46

Создание бегущей строки Empty
СообщениеТема: Re: Создание бегущей строки   Создание бегущей строки Icon_minitimeСб 14 Фев - 17:33

Ну и в заключении как можно использовать эффект бегущей строки Smile

Простой пример анимации изображения. Возьмем вот такую анимацию Создание бегущей строки Fd38d6479a77 доступную по ссылке http://s015.radikal.ru/i332/1502/18/fd38d6479a77.gif и вставим ее в бегущую строку

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

Получится следующее:



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

Вот еще интересный пример, с помощью тега marquee можно создать простенький слайдер имея изображения: Создание бегущей строки 00a4d9efbdf2 , Создание бегущей строки 157339fcc23e и Создание бегущей строки 8df18f918ab3

Код:
<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>
Вернуться к началу Перейти вниз
 

Создание бегущей строки

Предыдущая тема Следующая тема Вернуться к началу 
Страница 1 из 1

 Похожие темы

-
» Создание таблиц
» Создание надписей и логотипов

Права доступа к этому форуму:Вы не можете отвечать на сообщения
JagPlay  :: Графика и дизайн-