Як створити рухомий текст на сайті

Рухомий текст, також відомий як marquee, — це елемент вебсторінки, у якому текст або інша інформація безперервно переміщується по екрану. Колись цей ефект був дуже популярним у вебдизайні. Особливо часто його можна було зустріти на сайтах початку 2000-х років, де новини, оголошення та різні повідомлення буквально «бігли» сторінкою.

Сьогодні рухомий текст зустрічається набагато рідше. Сучасний вебдизайн зазвичай надає перевагу спокійнішій подачі інформації, а для створення динамічних елементів використовуються CSS-анімації та JavaScript. Проте marquee не зник повністю. Його досі можна зустріти на новинних сайтах, в інтернет-магазинах і різноманітних віджетах.

У деяких випадках рухомий текст може бути справді корисним. Наприклад, його можна використовувати, щоб привернути увагу до важливого повідомлення, показати коротку новину або розмістити велику кількість інформації в обмеженому просторі.

У цій статті ми розглянемо два способи створення рухомого тексту: сучасний варіант за допомогою CSS та старий, але досі відомий HTML-елемент <marquee>.

Створення рухомого тексту за допомогою CSS

Почнемо із сучасного способу. JavaScript нам не знадобиться — достатньо HTML та CSS.

Створимо контейнер, який приховуватиме текст, коли той виходитиме за його межі:

<div class="ticker">
    <div class="ticker__track">
        <span>Important information — Website news — Discounts — New arrivals</span>
        <span>Important information — Website news — Discounts — New arrivals</span>
    </div>
</div>

Тепер додамо CSS:

.ticker {
    overflow: hidden;
    white-space: nowrap;
}

.ticker__track {
    display: inline-flex;
    width: max-content;
    animation: ticker 20s linear infinite;
}

.ticker__track span {
    padding-right: 50px;
}

@keyframes ticker {
    to {
        transform: translateX(-50%);
    }
}

Розглянемо, як це працює.

Для .ticker встановлено overflow: hidden. Завдяки цьому текст, який виходить за межі контейнера, не буде видимим.

Властивість white-space: nowrap забороняє переносити текст на новий рядок.

Сам текст знаходиться всередині .ticker__track, який використовує width: max-content, щоб його ширина відповідала вмісту. Після цього до нього застосовується CSS-анімація:

animation: ticker 20s linear infinite;

Тут 20s — це тривалість одного циклу анімації. Чим менше це значення, тим швидше рухатиметься текст.

Ключовий момент цього способу полягає в тому, що текст розміщений усередині елемента двічі (або ще більше):

<span>Important information — Website news — Discounts — New arrivals</span>
<span>Important information — Website news — Discounts — New arrivals</span>

Це дозволяє створити безперервний рух. Коли перша копія повністю виходить за лівий край, друга займає її місце. Після завершення анімації цикл починається знову.

Таким чином ми уникаємо помітної паузи або стрибка між повтореннями.

Як змінити швидкість

Швидкість регулюється тривалістю анімації:

animation: ticker 20s linear infinite;

Наприклад, можна зробити рух тексту швидшим:

animation: ticker 10s linear infinite;

Або повільнішим:

animation: ticker 40s linear infinite;

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

Пауза при наведенні курсору

Іноді зручно зупиняти рухомий текст, коли користувач наводить на нього курсор. Це особливо корисно, якщо текст довгий і користувачеві потрібен додатковий час, щоб його прочитати.

Для цього достатньо додати:

.ticker:hover .ticker__track { 
  animation-play-state: paused; 
}

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

Приклад на jsfiddle – https://jsfiddle.net/igorrybalko/swo25bug

Старий спосіб — HTML <marquee>

А тепер трохи історії вебу.

До того, як CSS-анімації отримали широке застосування, розробники часто використовували спеціальний HTML-елемент <marquee> для створення рухомого тексту:

<marquee> Important information — Website news — Discounts — New arrivals </marquee>

Браузер автоматично створював рухомий текст на основі цього елемента.

Елемент мав різні атрибути, які дозволяли керувати його поведінкою. Наприклад, напрямок руху можна було змінити за допомогою атрибута direction:

<marquee direction="right"> This text moves to the right </marquee>

За замовчуванням текст рухається справа наліво.

Швидкість руху також можна було змінити за допомогою scrollamount:

<marquee scrollamount="10"> Fast scrolling text </marquee>

Також можна було вказати кількість повторень анімації:

<marquee loop="3"> This text will appear three times </marquee>

Існувала можливість зупиняти рух, коли користувач наводив курсор на текст:

<marquee onmouseover="this.stop()" onmouseout="this.start()" > Hover over the text </marquee>

Однак тут є важливий нюанс: <marquee> — це застарілий HTML-елемент, і його не варто використовувати в нових проєктах.

Сучасний HTML має описувати структуру сторінки, а візуальні ефекти та анімації краще реалізовувати за допомогою CSS.

Який спосіб обрати?

Якщо ви створюєте новий сайт, практично завжди варто використовувати CSS-анімацію.

Цей підхід має кілька переваг:

• не потребує JavaScript;
• поведінкою легко керувати за допомогою CSS;
• можна налаштувати швидкість і напрямок руху;
• анімацію можна поставити на паузу;
• зовнішній вигляд легко адаптувати до дизайну сайту;
• код краще відповідає сучасним підходам до веброзробки.

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

Не забувайте про доступність

Рухомий текст має і певні недоліки. Постійна анімація може ускладнювати читання інформації, а деяким користувачам рухомі елементи на екрані можуть бути неприємними.

Тому на реальному сайті бажано враховувати системне налаштування prefers-reduced-motion. Воно дозволяє вимкнути або зменшити анімацію для користувачів, які віддають перевагу мінімальній кількості руху в інтерфейсі.

Наприклад:

@media (prefers-reduced-motion: reduce) {
    .ticker__track {
        animation: none;
    }
}

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

Висновок

Рухомий текст — один із тих елементів вебдизайну, які нагадують нам про перші роки існування Інтернету. Колись він був присутній практично всюди, а сьогодні використовується набагато обережніше.

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

Для сучасних сайтів оптимальним варіантом буде CSS-анімація. Вона не потребує додаткових бібліотек і дозволяє повністю контролювати рух тексту. А елемент <marquee> краще залишити як частину історії веброзробки або використовувати лише для підтримки старого коду.