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

Перше, що бачать відвідувачі будь-якого сайту, його так звана «шапка». Це все елементи інтерфейсу, що знаходяться у верхній частині ресурсу. Індексування пошуковими системами також виробляється саме в такому порядку. Саме тому багато розробників вважають за краще ставити туди слайд-шоу, рухомий рядок. Слайд-шоу – елемент, що містить в собі всю інформацію, яку слід вивести в першу чергу. Це можуть бути рекламні оголошення, 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 () – ви вкажіть, що після того, як курсор прибраний, кадри продовжать рух.

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

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

HTML – теґом marquee. Щоправда, проходити перевірку на дотримання веб-стандартів сторінка після цього вже не буде.

Інструкція

1 крок

Найпростіший рядок бігу ви отримаєте, розташувавши текст бажаної довжини (в один рядок) між тегами < marquee >і . Типу цього:
< marquee >Повзе рядок, що біжить, дивіться, який гарний!
І всім вона буде хороша, крім одного. Повзе занадто швидко, читати не встигаєш! Напевно ви помічали щось подібне і на електронних рядках, що біжать, які сьогодні всюди. На деяких з них текст не повзе, а несеться алюром. Ось вже дійсно, не простий рядок, а біжуча! Треба б її уповільнити.

2 крок

Що ж, сповільнимо. З закриваючим тегом робити нічого не треба, як і з будь-якими іншими тегами, що закривають в HTML. Залишимо його як є. «Пошаманити» доведеться з відкриваючим, додавши в нього бажані параметри. Перший з них – scrollamount. Ну-ка, додамо його у відкриваючий тег:

Що, рядок поповзла повільніше? А це тому що раніше при кожному кроці рядок зсувався відразу на 6 пікселів (таке значення цього параметра за замовчуванням, коли він не заданий), а тепер – всього на 1. Текст повзе не тільки повільно, але й плавно.

3 крок

Можна зробити і по-іншому. Не змінюючи кількість пікселів, на яку рядок зсувається за один крок, збільшити паузу між кроками. Типово, вона дорівнює 85 мілісекундам. Давайте збільшимо її, наприклад, до 500, або, що те ж саме, до 0,5 секунд, використовуючи параметр scrolldelay:

Тепер рядок рухається теж повільно, але ривками – скористайтеся цим способом, якщо вам необхідний такий ефект. Не кажучи вже про те, що у відкритому тегу можна поєднувати обидва параметри, як scrollamount, так і scrolldelay, якщо їх значення, згідно з вашим задумом, повинні відрізнятися від зазначених за замовчуванням: відповідно, 6 і 85. Успіхів вам в експериментуванні з рядками, що біжать на своїх веб-сторінках.