Двигаюшийся текст

Пятница, 11 Ноября 2016 г. 22:08 + в цитатник

Для создания бегущей строки используют специальный тег "marquee".

Движение влево по всёй ширине поста

Атрибут direction – задаёт направление движения бегущей строки:

direction="right" – движение текста вправо.
Движение вправо по всёй ширине поста

direction="up" – движение текста в верх.
- Движение вверх

direction="down" – движение текста вниз.
- Движение вниз

direction="left" – движение текста влево. При создании бегущей строки движущейся влево, атрибут direction="left" писать необязательно т.к. по умолчанию она всегда движется влево.

Атрибут width="300" – задаёт ширину поля бегущей строки в пикселях.
Атрибут height="40" – задаёт высоту поля бегущей строки.

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

- Движение влево в заданном поле
- Движение вправо в заданном поле

Если бегущая строка или картинка по вертикали, лучше поставить ограничение высоты движения.
- Движение вверх в заданном поле

- Движение вниз в заданном поле

Атрибут behavior позволяет управлять свойствами движения текста, принимая разные значения:

behavior="alternate" – Движение от края к краю.
Движение от края до края (туда-обратно)

Атрибуты управляющие движением текста можно группировать.
Например: написав сразу два атрибута direction="up" и behavior="alternate" текст будет двигаться от верха к низу и обратно.
- Движение вверх-вниз (туда-обратно)

behavior="scroll" – Прокрутка текста (В большинстве случаев можно не указывать, т.к. текст по умолчанию всегда прокручивается).
- Женщина — странная птичка.
Подскакивает с утра, будто жаворонок,
целый день трудится как дятел
и ложится поздно, будто сова.
При этом должна ворковать как голубка
и блистать как жар-птица,
оставаясь для чужих мужчин журавлем в небе,
а для своего синицей в руке…

behavior="slide" – Прокрутка текста с остановкой.
Используя два атрибута direction="up" и behavior="slide" текст поднимается снизу вверх и достигнув самого верха останавливается.
- Движение вверх с остановкой

loop="3" – задаёт число проходов бегущей строки.
(Если указать "3", то текст проедет три раза и больше показываться не будет, только если ещё раз кликнуть на поле движения текста или обновить страницу).
- Движение с заданным количеством проходов

Атрибут scrollamount="1" – задаёт скорость движения строки.
Что бы изменить скорость движения строки, измените цифру движения.
- Скорость движение "1"
- Скорость движение "3"
- Скорость движение "5"
- Скорость движение "10"
- Скорость движение "20"
- Скорость движение "30"

Атрибут bgcolor="#E9E9D1" – задаёт фоновый цвет бегущей строки.
(Вместо E9E9D1 подставляете свой цвет).
- Бегущая строка на фоне

Для более красивого оформления бегущей строки можно выделить края подставив:
style="BORDER: #000000 1px solid"
Здесь #000000 - это цвет, а 1px толщина границ бегущей строки в пикселях.
solid - непрерывная (сплошная) линия
dashed - пунктирная линия
dotted - точечная линия
- Бегущая строка на фоне в рамке

- Бегущая строка на фоне в пунктирной рамке

- Бегущая строка на фоне в точечной рамке

- Бегущая строка в цветной точечной рамке

- Бегущая цветная строка на фоне в рамке

Атрибуты:
onmouseover=this.stop(); - при наводе курсора мыши текст остановится;
onmouseout=this.start(); - при убирании курсора мыши текст продолжит своё движение.
(к сожалению, работает не на всех сайтах)
-Останавливаем строку наведением курсора мыши

Другие атрибуты:
scrolldelay="20" –задаёт временной интервал между шагами бегущей строки.
hspace="70" - задает смещение в пикселах вправо бегущей строки.
vspace="70" - задает пустое пространство выше и ниже бегущей строки.

Добавляя к тегу marquee различные атрибуты Вы получите двигающийся текс на свое усмотрение.

И ещё несколько примеров:
ВСТРЕЧНЫЙ ТЕКСТ
ПО ВЕРТИКАЛИ

Разбегающийся ТЕКСТПО ВЕРТИКАЛИ

Разбегающийся ТЕКСТ ПО ГОРИЗОНТАЛИ

1 ЧАСТЬ ТЕКСТА2 ЧАСТЬ ТЕКСТА1 ЧАСТЬ ТЕКСТА2 ЧАСТЬ ТЕКСТА

Движение волнообразное

Движение диагональное

В
а
ш

Т
Е
К
С
Т