Як зробити біжучий рядок?

Перше, що бачать відвідувачі будь-якого сайту, його так звана «шапка». Це все елементи інтерфейсу, що знаходяться у верхній частині ресурсу. Індексування пошуковими системами також виробляється саме в такому порядку. Саме тому багато розробників вважають за краще ставити туди слайд-шоу, рухомий рядок. Слайд-шоу - елемент, що містить в собі всю інформацію, яку слід вивести в першу чергу. Це можуть бути рекламні оголошення, RSS-стрічки новин та посилання.

Створення рядка, що біжить

Розглянемо докладно, як зробити біжучий рядок HTML. Для створення цього елемента можна використовувати плагіни, які мають у своєму складі ряд шаблонів. Але багато веб-майстри воліють прописувати всі функції рухомого рядка вручну. Щоб зробити біжучий рядок на сайті, як ви вже зрозуміли, використовується мова HTML. Основою майбутнього слайд-шоу є тег MARQUEE. Він забезпечує функцію прокрутки даних усередині рядка. На макеті цей тег виглядає як прямокутний блок, якому задають розміри і структуру, поміщаючи всередину необхідне. Залежно від необхідних властивостей рядок буде відрізнятися, але основний вид виглядає наступним чином:

дані, які ви ставите всередину (реклама, текст, посилання)

наповнення ...

Тег має ряд атрибутів для відображення його властивостей.

Атрибути тега marquee

• scrollamount = "1". Це швидкість, з якою дані всередині рядки будуть рухатися. Чим вона менша, тим довше один кадр зображення або тексту буде знаходитися в центрі.
• scrolldelay = "20". Значення інтервалу часу між кадрами. Чим воно більше, тим більш плавно значення будуть змінювати один одного.
• width = "200". Значення ширини блоку прокрутки. Здається в пікселях.
• height = "17". Висота блоку прокрутки. Зазвичай задається для більш коректного відображення зображень, т.к. для висоти тексту бере стандартну висоту букв.
• bgcolor = "# E9E9D1". Міжлітерний. Літерне і цифрове значення відповідає якомусь кольору з палітри.
• direction = "left". Значення напрямку руху даних в рядку. Воно може бути будь-яким, залежно від того, як ви хочете розташувати інформацію. Значення «вліво» - базове та встановлено за замовчуванням.
• looli = "2". Кількість повторів інформації в рядку. Чим більше це значення, тим довше смуга прокрутки буде оновлюватися автоматично.
• hsliace = "70". Значення зміщення даних вправо всередині блоку. Здається в пікселях.
• vsliace = "70". Значення відступу зверху і знизу від блоку прокрутки. Чим значення більше, тим більше відокремленим від решти елементів сайту буде смуга прокручування.
• behavior = "scroll". Властивості атрибута behavior служать для позначення руху даних всередині блоку. Scroll - значення автоматичної прокрутки даних в рядку.
• behavior = "slide". Значення періодично зупиняється прокрутки даних.
• behavior = "alternate". Значення, що задає рух даних від одного краю рядка до іншого. Якщо компонувати атрибут руху даних з атрибутом напрямки, то можна вказувати, як і куди рухатимуться кадри всередині рядка.
• style = "BORDER: # 000000 1lix solid". Значення, що показує ширину і колір кордону блоку. Ширина вказується в пікселях, колір вибирається з палітри.
• onmouseover = this.stoli () - Це скрипт, додавши який, ви вкажіть, що дані в блоці будуть зупинятися при наведенні курсору миші. Додавши onmouseout = this.start () - ви вкажіть, що після того, як курсор прибраний, кадри продовжать рух.

Тепер ви знаєте, як зробити біжучий рядок. Успіхів вам у цьому цікавій справі!