Для створення рядка, що біжить HTML має закриваючий тег . Він може містити не тільки текст, але й інші елементи: таблиці, зображення, форми і так далі. За допомогою атрибутів задається не тільки горизонтальне переміщення, але і вертикальне. Для останнього необхідно вказувати висоту поля.
Досить цікаво, що спочатку він створювався під браузер Internet Explorer, а інші навчилися розуміти пізніше. Хоча зазвичай відбувається навпаки, і саме браузер від Microsoft завжди виступає у ролі відсталої, створюючи безліч проблем програмістам.
Актуальність
– тег біжучого рядка в HTML. Його підтримують всі актуальні версії браузерів. В цьому плані немає жодних проблем, і його можна сміливо використовувати.
Однак з точки зору семантики він вважається застарілим і більше не включений в специфікацію HTML. Таким чином код, що включає даний тег, не пройде валідацію.
З чим це пов’язано? У сучасному HTML біжучого рядка немає, так як всю анімацію і стилізацію виконує CSS. Деколи доводиться використовувати і JS. Відповідно, HTML відповідає лише за розмітку. Тим не менш буде прекрасно працювати, завдяки збереженій сумісності з більш старими версіями.
Синтаксис
В HTML біжучий рядок задається закривається тегом:
…
Всередину може бути вміщений не тільки текст, але й інші елементи, наприклад, фотографії або таблиці. Нагадаємо, що даний код хоч і є робочим, валідність він не пройде.
Швидкість прокручування
Керувати біжучим рядком в HTML можна за допомогою атрибутів. Швидкість руху задається через атрибут scrollamount. Це буде виглядати наступним чином:
some text
Зміна швидкості відбувається за рахунок постійного видалення інформації про стан тексту і відображення його на новому місці. Змінюючи значення в атрибуті, ми задаємо кількість пікселів між старим і новим положенням. Відповідно, чим більше значення, тим більше швидкість. Даний атрибут підтримується всіма браузерами.
Якщо швидкість прокручування занадто велика, включиться автоматичне обмеження, щоб текст залишався читаним. Якщо необхідно обійти це обмеження, вписуємо атрибут truespeed. Зазначимо, що не всі версії браузерів його розуміють. Працювати з ним може IE і Firefox.
Затримку між прокруткою тексту можна встановити за допомогою атрибута scrolldelay.
Поле прокручування
По ширині тег займе всю ширину батьківського елемента. А по висоті буде дорівнює контенту всередині. Щоб змінити це, необхідно використовувати два атрибути, які відповідають за висоту і ширину. Це height і width відповідно. Можна використовувати пікселі або відсотки.
Також є ще два атрибута, а саме hspace і vspace. Вони необхідні для створення порожнього простору навколо рядка, що біжить, а точніше – відступу. Відстань визначається відповідно по горизонталі і вертикалі.
Параметри руху
Крім швидкості, можна задати і інші параметри руху. За напрямком руху відповідає атрибут direction. За замовчуванням текст рухається справа наліво. Такий рух відповідає значенню right. Щоб змусити текст рухатися в протилежну сторону, достатньо вказати left, а це буде виглядати наступним чином:
…
Крім горизонтальної прокрутки, можна вказати і вертикальну. Для руху вмісту вгору використовуємо значення up, а для руху вниз – down.
Для зміни характеру руху є ще два цікавих і корисних атрибута. Можна задати число прокручувань, після яких вміст зупиниться в крайньому положенні і не буде рухатися. Така властивість відповідає атрибуту loop. За замовчуванням варто значення -1. Якщо поставити 0, текст не буде рухатися зовсім. Цілі значення вище 0 запустять лічильник.
Більш об’ємним атрибутом є behavior. Він відповідає за спосіб руху контенту. За замовчуванням варто значення scroll. Він означає, що вміст буде переміщатися по заданому напрямі, а після того, як повністю зникне, і почне свій рух заново.
Якщо вмісту мало, можна задати значення атрибуту alternate. Після досягнення крайньої точки вміст почне свій рух у зворотному напрямку. І так нескінченну кількість разів, якщо не встановлено лічильник.
Останнє значення – це slide. Він дає команду вмісту дійти до кінця і зупинитися.
Стилі
Тег включає в себе атрибут bgcolor ,який дозволяє встановити фоновий колір рядка. За замовчуванням він такий же, як і сторінка.
Щоб створити красиву біжучий рядок, HTML недостатньо. Необхідно використовувати стилі. Наприклад, якщо ми хочемо зробити текст більш красивим:
Біжучий рядок
Застосування
Способів використовувати біжучий рядок багато. Можна просто використовувати біжить текст для залучення уваги. Можливо зробити подобу інформера, що вміщає в себе велику кількість тексту. Можна також вставити ряд картинок, які будуть плавно переміщатися. Таким чином вийде показати більше контенту.
Біжучий рядок в HTML-коді допоможе створити просту анімацію, якщо застосувати анімовану картинку, наприклад, людини, що біжить.
Підсумки
Ми розібрали, як зробити біжучий рядок в HTML. Це досить простий метод, яким легко навчитися. Однак він є застарілим і не проходить валідацію. Подальшого розвитку і підтримки не отримав, із-за чого можуть виникати проблеми у роботі в різних браузерах.
Використовувати його не рекомендуємо. Для створення рядка, що біжить, а точніше анімації в цілому, CSS3 обзавівся унікальним правилом @keyframes. Він дозволяє створювати послідовні кадри анімації. А властивість animation вже визначає подачу цієї самої анімації. Цей набір інструментів дає набагато більше можливостей, ніж застарілий тег . Користуватися їм також набагато зручніше, а найголовніше – це те, до чого прагнуть вже довгі роки: очистити HTML від непотрібного мотлоху і зробити його більш читабельним і структурованим.
