Тег рядка, що біжить

За замовчуванням організація інформаційного рядка, що біжить виглядає таким чином.

<marquee>текст рядка, що біжить</marquee>

Текст рухається справа наліво, потім ховається за межами області, після чого починає рух з початку.

У тега <marquee> може бути кілька атрибутів (тут наводяться лише основні, решту можна знайти у довідниках по html)

direction - Задає напрям руху

bgcolor - Задає колір фону, на якому рухається текст. За замовчуванням це фоновий текст сторінки, але можна поставити будь-який колір.

scrollamount - задає швидкість руху, що задається у пікселях. Значення за замовчуванням - 6.

behavior - Задає тип руху. У цього атрибута можуть бути такі значення:

scroll - Контент переміщується у напрямку, що задається атрибутом direction, потім ховається за межами області, після чого починає рух з початку.

slide - Контент переміщується у напрямку, що задається атрибутом direction, доходить до краю області і зупиняється.

alternate - Контент міняє напрямок, коли доходить до краю.

ПРИКЛАДИ

Текст переміщується не справа наліво, а зліва направо

<marquee direction="left"> текст рядка, що біжить </marquee>

текст рядка, що біжить

Текст переміщується між правим та лівим краєм сторінки

<marquee behavior="alternate" direction="left"> текст рядка, що біжить </marquee>

текст рядка, що біжить

Текст переміщується справа наліво та зупиняється у лівого краю.

<marquee behavior="slide"> текст рядка, що біжить </marquee>

текст рядка, що біжить

Текст переміщується на жовтому фоні

<marquee bgcolor="yellow"> текст рядка, що біжить</marquee>

текст рядка, що біжить

Великий червоний текст переміщується між правим та лівим краєм сторінки

<marquee behavior="alternate"><i><b><span style="color: red;"><span style="font-size: 18pt;"> текст рядка, що біжить </span></span></b></i></marquee>

текст рядка, що біжить

Насправді елемент <marquee> відображається як прямокутник, ширина і висота якого встановлюються. Якщо цих значень не вказувати, то за замовчуванням ширина і висота цього прямокутника будуть дорівнювати ширині шаблону і висоті текстового рядка відповідно.

За бажанням розміри цього прямокутника можна задати за допомогою атрибутів width и height. Тоді прокрутка тексту буде відбуватися в межах заданих розмірів. Якщо прямокутник великий, то прокрутку можна запустити не тільки горизонтально, але й вертикально.

Допускається використовувати значення ширини в пікселях або відсотках. Якщо встановлений відсотковий запис, то розміри обчислюються відносно шаблону сайту. Іншими словами, width="100%" означає, що елемент буде займати всю доступну ширину веб-сторінки.

Приклад: Організувати прокрутку тексту білого кольору знизу вгору в прямокутнику оливкового кольору розміром 150х180 пікселів.

Код буде виглядати так:

<marquee bgcolor="olive" direction="up" height="150" style="color: white; text-align: center;" width="800">Текст рядка, що біжить </marquee>

Текст рядка, що біжить



У прокрутку можна пустити не тільки один рядок, а й довгий текст. Якщо є бажання розмістити блок із текстом по центру сторінки, то перед тегом прокручування можна поставити тег центрування цього блоку <div style="text-align: center;">

Тоді це буде виглядати так.

Насправді елемент <marquee> відображається як прямокутник, ширина і висота якого встановлюються. Якщо цих значень не вказувати, то за замовчуванням ширина і висота цього прямокутника будуть дорівнювати ширині шаблону і висоті текстового рядка відповідно.

За бажанням розміри цього прямокутника можна задати за допомогою атрибутів width и height. Тоді прокрутка тексту буде відбуватися в межах заданих розмірів. Якщо прямокутник великий, то прокрутку можна запустити не тільки горизонтально, але й вертикально.

Допускається використовувати значення ширини в пікселях або відсотках. Якщо встановлений відсотковий запис, то розміри обчислюються відносно шаблону сайту. Іншими словами, width="100%" означає, що елемент буде займати всю доступну ширину веб-сторінки.



Пересувати по екрану можна як текст, так і зображення. Для цього достатньо замість тексту вказати адресу зображення (ви можете розмістити його на службовій сторінці)

Код при цьому може виглядати так: 

 <marquee direction="left" scrollamount="20"><img src="https://адреса зображення" /></marquee>