Створюємо біжучий рядок HTML

Створюємо біжучий рядок HTML

Для створення біжучого рядка HTML має тег, що закривається, < marquee >. Він може містити не тільки текст, але й інші елементи: таблиці, зображення, форми тощо. За допомогою атрибутів задається не тільки горизонтальне переміщення, а й вертикальне. Для останнього необхідно вказувати висоту поля.

Досить цікаво, що спочатку він створювався під браузер Internet Explorer, а інші навчилися його розуміти пізніше. Хоча зазвичай відбувається навпаки, і саме браузер від Microsoft завжди виступає в ролі відстаючого, створюючи безліч проблем програмістам.


Актуальність

< marquee > - теґ рядка, що біжить у HTML. Його підтримують всі актуальні версії браузерів. У цьому плані немає ніяких проблем, і можна його сміливо використовувати.

Однак з точки зору семантики він вважається застарілим і більше не включений в специфікацію HTML. Таким чином код, що включає цей тег, не пройде валідацію.

З чим це пов 'язано? У сучасному HTML біжучого рядка немає, оскільки вся анімація та стилізація виконуються CSS. Часом доводиться використовувати і JS. Відповідно, HTML відповідає тільки за розмітку. Тим не менш < marquee > буде чудово працювати завдяки збереженій сумісності з більш старими версіями.

Синтаксис

У HTML рядок, що біжить, вказується тегом:

<marquee>...</marquee>

Всередину може бути розміщений не тільки текст, але й інші елементи, наприклад, фотографії або таблиці. Нагадаємо, що цей код хоч і є робочим, валідність він не пройде.


Швидкість прокрутки

Керувати біжучим рядком у HTML можна за допомогою атрибутів. Швидкість руху задається через атрибут scrollamount. Виглядати це буде наступним чином:

<marquee scrollamount=""1"">some text</marquee>

Зміна швидкості відбувається за рахунок постійного видалення інформації про положення тексту та відображення його на новому місці. Змінюючи значення в атрибуті, ми задаємо кількість пікселів між старим положенням і новим. Відповідно, чим більше значення, тим більше швидкість. Цей атрибут підтримується всіма переглядачами.

Якщо швидкість прокрутки занадто велика, увімкнеться автоматичне обмеження, щоб текст залишався читаним. Якщо необхідно обійти дане обмеження, вписуємо атрибут truespeed. Зазначимо, що не всі версії браузерів його розуміють. Працювати з ним може IE і Firefox.

Можна встановити затримку між прокруткою тексту за допомогою атрибута scrolldelay.

Поле прокрутки

По ширині тег займе всю ширину батьківського елемента. А по висоті дорівнюватиме контенту всередині. Щоб змінити це, потрібно використовувати два атрибути, що відповідають за висоту і ширину. Це height і width відповідно. Ви можете використовувати пікселі або відсотки.

Також є ще два атрибути, а саме hspace і vspace. Вони необхідні для створення порожнього простору навколо біжучого рядка, а точніше - відступу. Відстань вказується відповідно по горизонталі та вертикалі.


Параметри руху

Крім швидкості, можна задавати й інші параметри руху. За напрямком руху відповідає атрибут direction. За замовчуванням текст рухається справа ліворуч. Такий рух відповідає значенню right. Щоб змусити текст рухатися в протилежний бік, достатньо вказати left, а виглядати це буде наступним чином:

<marquee direction=""left"">...</marquee>

Крім горизонтальної прокрутки, можна вказати вертикальну. Для руху вмісту вгору використовуємо up, а для руху вниз - down.

Для зміни характеру руху є ще два цікавих і корисних атрибути. Можна вказати кількість прокруток, після яких вміст зупиняється в крайньому положенні і не рухатиметься. Така властивість відповідає атрибуту loop. Типовим є значення -1. Якщо поставити 0, текст не рухатиметься зовсім. Цілі значення вище 0 запустять лічильник.

Більш об 'ємним атрибутом є behavior. Він відповідає за спосіб руху контенту. Типовим є значення scroll. Він означає, що контент буде переміщатися по заданому напрямку, а після того як повністю сховається, почне свій рух заново.


Якщо контенту мало, можна вказати атрибуту значення alternate. Після досягнення крайньої точки вміст почне свій рух у зворотному напрямку. І так нескінченна кількість разів, якщо не заданий лічильник.

Останнє значення - це slide. Він дає команду вмісту дійти до кінця і зупинитися.

Стилі

Тег < marquee > включає атрибут bgcolor, який дозволяє встановити колір тла рядка. Типово, він такий самий, як і сторінка.

Для створення красивого біжучого рядка HTML недостатньо. Слід використовувати стилі. Наприклад, якщо ми хочемо зробити текст більш красивим:

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


Застосування

Способів використовувати біжучий рядок багато. Можна просто використовувати біжучий текст для привернення уваги. Можливо зробити подобу інформера, що вміщує в себе велику кількість тексту. Можна також вставити ряд картинок, які будуть плавно переміщуватися. Таким чином вийде показати більше контенту.

Біжучий рядок у HTML-коді допоможе створити просту анімацію, якщо застосувати анімовану картинку, наприклад, тікаючу людину.

Підсумки

Ми розібрали, як зробити біжучий рядок в HTML. Це досить простий метод, якому легко навчитися. Однак він є застарілим і не проходить валідацію. Подальшого розвитку і підтримки не отримав, через що можуть виникати проблеми в роботі в різних браузерах.

Використовувати його не рекомендуємо. Для створення біжучого рядка, а точніше анімації в цілому, CSS3 обзавівся унікальним правилом @ keyframes. Він дозволяє створювати послідовні кадри анімації. А властивість animation вже визначає подачу цієї самої анімації. Цей набір інструментів дає набагато більше можливостей, ніж застарілий тег < marquee >. Користуватися ним також набагато зручніше, а найголовніше - це те, чого прагнуть вже довгі роки: очистити HTML від непотрібного непотрібу і зробити його більш читаним і структурованим.