Для создания бегущей строки HTML имеет закривається тег
Досить цікаво, що спочатку вінстворювався під браузер Internet Explorer, а інші навчилися його розуміти пізніше. Хоча зазвичай відбувається навпаки, і саме браузер від Microsoft завжди виступає в ролі відсталого, створюючи безліч проблем програмістам.
актуальність
Однак з точки зору семантики він вважається застарілим і більше не включений в специфікацію HTML. Таким чином код, що включає даний тег, не пройде валідацію.
З чим це пов'язано?У сучасному HTML біжучого рядка немає, так як всю анімацію і стилізацію виконує CSS. Часом доводиться використовувати і JS. Відповідно, HTML відповідає тільки за розмітку. Проте
синтаксис
В 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 від непотрібного мотлоху і зробити його більш читабельним і структурованим.
