Рядок, що біжить HTML - 29 Січня 2015 - Скрипти - Все тут
Отже, знайомтеся! Чарівний тег - .
Спочатку цей тег був розроблений для браузера Internet Explorer, але згодом інші браузери стали підтримувати його застосування.
* width — ширина поля рядка, що біжить, у пікселах або відсотках від ширини вікна.
* height - висота поля рядка, що біжить (у пікселах).
* hspace , vspace - інтервали по горизонталі та вертикалі між текстом рядка та краями її поля (у пікселах).
* aligh - положення тексту рядка, що біжить, в її полі; можливі аргументи.
* direction - визначає напрямок руху; можливі аргументи.
* left (справа ліворуч).
* right (зліва направо).
* behavior - характер руху рядка; можливі аргументи.
* scroll - текст з'являється від одного краю і ховається за іншим.
* slide - рядок витягується з одного краю поля і зупиняється біля іншого краю.
* alternate - змінний напрямок руху, від одного краю до іншого, а потім назад.
* loop — кількість повторень тексту в рядку, що задається числом; якщо необхідно «нескінченну» кількість повторень, слід задати аргумент у вигляді ключового слова infinity .
Атрибут loop не впливає на поведінку рядка, якщо для атрибуту behavior задані аргументи alternate або slide .
* scrollamount - встановлює довжину (у пікселах. При великому значенні параметра текст рухається ривками, при малому - уповільнено.
* scrolldelay - величина паузи між тактами переміщення тексту в мілісекундах.
* bgcolor - встановлює колір поля рядка, що задається шістнадцятковим числом або ім'ям.
Рядок почав рухатися. Тепер давайте зробимо рядок трохи помітнішим, додавши стилі.
Застосувавши атрибутdirection зі значеннямright ми змінимо напрямок руху рядка, що біжить, і він буде рухатися праворуч наліво:
За умовчанням тегу присвоєно атрибутdirection зі значеннямleft, тому рядок без застосування атрибутів рухається зліва направо.
Підставивши значенняup для атрибутуdirection ми змусимо рядок рухатися знизу вгору:
Значенняdown вкаже рядку рухатися зверху донизу:
Тепер давайте трохи зупинимося і розберемося як працює тег.
Анімація відбувається за рахунок постійного затирання інформації та відображення її на новому місці. За допомогою значень для атрибуту ми встановлюємо відстань у пікселях між стертим та новим положенням рядка, тим самим впливаючи на швидкість та плавність її руху.
За мовчанням стоїть значення 6, але якщо задати значення 1, то відстань між старим і новим положенням рядки дорівнюватиме 1 пікселю, що забезпечить повільний і плавний хід рядка, що біжить:
Атрибутbehavior задає спосіб прокручування всередині заданого блоку і за умовчанням має значенняscroll, що змушує рядок, що біжить, ховатися з виду і починати рух спочатку.
Але якщо підставити значенняalternate, то рядок не буде ховатися з уваги, а дійшовши до меж блоку почне рух у зворотний бік:
Атрибутheight визначає висоту блоку. За замовчуванням коштує 12 пікселів, але давайте її змінимо і трохи додамо до швидкості прокручування рядка, що біжить:
Атрибутwidth відповідає за ширину блоку. Можна використовувати атрибутиwidth іheight разом, щоб задати бажані межі блоку. Для наочності додамо рамку в стилі і трохи сповільнимо швидкість прокручування:
Тепер давайте зададимо фон для рядка, що біжить. Для цього застосуємо атрибутbgcolor і поставимо йому жовтий колір фону:
Тепер спробуємо зробити так, щоб рядок, що біжить, рухався в різні боки.
Ось простий приклад анімації зображення:
Звичайно, сама картинка анімована у фотошопі, але ми її змусили переміщатися по сторінці, створюючи ефект руху.
Ось ще цікавий приклад, за допомогою тегаmarquee можна створити простенький слайдер: