Якщо ви хочете привернути увагу покупців до акції, доставки або важливого повідомлення, текст у банері над шапкою можна зробити біжучим (бігучим) рядком за допомогою HTML-тега <marquee>.
Важливо
У цій статті наведено приклади CSS, які допоможуть реалізувати оформлення, недоступне стандартними інструментами платформи.
Такі зміни виконуються власником магазину або його розробником самостійно.
Служба підтримки не надає консультацій щодо написання, адаптації чи налагодження індивідуального CSS-коду. Наша мета проінформувати вас про технічну можливість реалізації такого рішення.
За допомогою цього тега можна:
- зробити текст рухомим;
- змінити напрямок руху;
- налаштувати швидкість;
- обмежити кількість повторень.
Як додати біжучий рядок
-
Перейдіть до Сайт → Банери → Банер над шапкою
-
Відкрийте потрібний банер.
-
У полі Текст додайте тег
<marquee>перед текстом і</marquee>після нього.
-
Збережіть зміни.
Наприклад:
<marquee>🚚 Безкоштовна доставка від 1500 грн • 🎁 Знижка 10% на перше замовлення • 📦 Відправка щодня</marquee>
Або:
<marquee>Ціни та наявність товарів на сайті актуальні.</marquee>
Доступні налаштування
Напрямок руху
За замовчуванням текст рухається справа наліво.
Справа наліво
<marquee direction="left">Текст</marquee>
Зліва направо
<marquee direction="right">Текст</marquee>
Знизу вгору
<marquee direction="up">Текст</marquee>
Зверху вниз
<marquee direction="down">Текст</marquee>
Швидкість руху
Швидкість задається атрибутом scrollamount.
Чим більше число — тим швидше рухається текст.
<marquee scrollamount="3">Повільний текст</marquee>
<marquee scrollamount="8">Стандартна швидкість</marquee>
<marquee scrollamount="15">Швидкий текст</marquee>
Кількість повторень
За замовчуванням біжучий рядок повторюється безкінечно.
Щоб обмежити кількість повторень, використовуйте атрибут loop.
<marquee loop="3">Текст повториться тричі</marquee>
Таблиця параметрів
| Атрибут | Приклад | Опис |
|---|---|---|
direction |
left, right, up, down |
Змінює напрямок руху тексту. |
scrollamount |
8 |
Встановлює швидкість руху. Чим більше значення — тим швидше рухається текст. |
loop |
3 |
Визначає кількість повторень анімації. Якщо атрибут не вказаний, рядок рухається безкінечно. |
Приклади використання
Повідомлення про акцію
<marquee>🔥 Знижки до 50% на обрані товари!</marquee>
Безкоштовна доставка
<marquee>🚚 Безкоштовна доставка від 1500 грн</marquee>
Графік роботи
<marquee>🕘 Працюємо щодня з 09:00 до 18:00</marquee>
Повільний рух справа наліво
<marquee direction="left" scrollamount="4">
🚚 Безкоштовна доставка від 1500 грн • 🎁 Знижка 10% на перше замовлення
</marquee>
Швидкий рух зліва направо (5 повторень)
<marquee direction="right" scrollamount="10" loop="5">
🔥 Літній розпродаж! Знижки до -50% 🔥
</marquee>
Поширені запитання
Чи можна зробити біжучий рядок без CSS?
Так. Для цього достатньо використати HTML-тег <marquee>.
Чи можна змінити швидкість руху?
Так. Для цього використовуйте атрибут scrollamount.
<marquee scrollamount="8">Текст</marquee>
Чи можна змінити напрямок руху?
Так. Для цього використовуйте атрибут direction.
<marquee direction="right">Текст</marquee>
Чи можна зробити так, щоб рядок повторювався лише кілька разів?
Так. Для цього використовуйте атрибут loop.
<marquee loop="3">Текст</marquee>
Чи можна використовувати HTML усередині біжучого рядка?
Так. Наприклад, можна зробити частину тексту жирною або додати посилання.
<marquee>
<strong>🎉 Акція!</strong> <a href="/sale">Перейти до розпродажу</a>
</marquee>
Чи можна використовувати емодзі?
Так. Емодзі відображатимуться разом із текстом.
<marquee>🔥 Знижки до 50% • 🚚 Безкоштовна доставка • 🎁 Подарунок до кожного замовлення</marquee>
Корисні поради
- Для довгих повідомлень рекомендуємо використовувати
scrollamount="5"–8— так текст буде комфортно читати. - Не встановлюйте занадто велику швидкість, якщо повідомлення містить багато тексту.
- Усередині
<marquee>можна використовувати інші HTML-теги, наприклад<strong>,<em>,<a>та<br>.
Зверніть увагу. Тег
<marquee>є застарілим елементом HTML, однак наразі підтримується більшістю сучасних браузерів. Його все ще можна використовувати для швидкого створення біжучого рядка без додаткового CSS.