HTML з нуля: Рухомий рядок у HTML. Урок №9 Overcod.net

HTML з нуля: Рухомий рядок у HTML. Урок №9

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

Рухомий рядок можна застосовувати для відображення новин, акцій, рекламних повідомлень і навіть декоративних елементів дизайну (наприклад, рух хмар у шапці сайту). Ви самі знайдете застосування цьому ефекту, а моя задача — показати, як його реалізувати на практиці.

Тег для створення рухомого рядка

Для створення рухомого рядка використовується тег:

<marquee></marquee>

Приклад коду:

<html>
<head>
    <title>Рухомий рядок</title>
</head>
<body>
    <marquee>Це рухомий рядок</marquee>
</body>
</html>

Налаштування атрибутів

Колір фону

Щоб змінити фон рядка, додайте атрибут bgcolor:

<marquee bgcolor="#ccc">Рухомий рядок</marquee>

Висота та ширина

Для задання розмірів використовуйте атрибути width і height:

<marquee bgcolor="#ccc" width="200px" height="40px">Рухомий рядок</marquee>

Тип руху

Атрибут behavior визначає спосіб руху рядка:

scroll — звичайна прокрутка (за замовчуванням);
slide — зупинка рядка на іншому краї;
alternate — рух від краю до краю.

Приклад:

<marquee behavior="scroll">Звичайна прокрутка</marquee>
<marquee behavior="slide">Рухомий рядок зупиняється на іншому краї</marquee>
<marquee behavior="alternate">Рух від краю до краю</marquee>

Напрямок руху

Атрибут direction задає напрямок:

left — вліво (за замовчуванням);
right — вправо;
up — вгору;
down — вниз.

Приклад:

<marquee direction="right">Рух вправо</marquee>
<marquee direction="up" height="50px">Рух вгору</marquee>
<marquee direction="down" height="50px">Рух вниз</marquee>

Швидкість руху

Атрибут scrollamount визначає швидкість:

<marquee scrollamount="10">Швидкий рух</marquee>

Чим більше значення, тим швидше рух.

Затримка між кроками

Атрибут scrolldelay задає паузу між переміщеннями. Чим більше значення, тим повільніше рух:

<marquee scrolldelay="500">Повільний рух</marquee>

Кількість повторень

Атрибут loop задає кількість циклів анімації:

<marquee loop="3">Рядок повториться тричі</marquee>

Відступи

Атрибут hspace додає горизонтальні відступи:

<marquee hspace="50">Рухомий рядок з відступами</marquee>

Додавання зображення

Вставити картинку можна за допомогою тега <img>:

<marquee direction="right"><img src="image.gif"></marquee>

Додавання посилання

Посилання можна додати всередину рухомого рядка:

<marquee>Відвідайте наш сайт <a href="https://www.overcod.net/">Overcod.net</a></marquee>

Повний приклад з посиланням:

<html>
<head>
    <title>Рухомий рядок</title>
</head>
<body>
    <marquee bgcolor="#ccc" behavior="alternate" direction="right" scrollamount="5" loop="2" hspace="10">
        Рухомий рядок на блозі <a href="https://www.overcod.net/">Overcod.net</a>
    </marquee>
</body>
</html>

На цьому все! Чекаю вас на наступному уроці. Бажаю успіхів!