Бегущая строка — это классический визуальный элемент, в котором текст непрерывно движется по экрану. В старом HTML для этого использовался тег <marquee>, но он устарел. Вместо него сейчас можно сделать более гибкую и красивую реализацию на CSS.
Это статья из цикла заметок по CSS анимации и эффектам.
Что мы будем использовать:
- контейнер фиксированной ширины с
overflow: hidden; - текстовый блок, который движется с помощью
@keyframesиanimation.
Пример того, как это выглядит (реализован также эффект остановки анимации при наведении):
Вот пример на чистом CSS / HTML
|
1 2 3 |
<button class="rotate-on-hover"> <span class="icon">🔄</span> </button> |
Можно заменить 🔄 на любую SVG-иконку, например из Font Awesome или другого набора.
Стили:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
.marquee-container { width: 100%; overflow: hidden; white-space: nowrap; background: #111; color: #fff; padding: 10px; box-sizing: border-box; border: 1px solid #444; position: relative; } .marquee-text { display: inline-block; padding-left: 100%; animation: css-animation-marquee 10s linear infinite; } @keyframes css-animation-marquee { 0% { transform: translateX(0%); } 100% { transform: translateX(-100%); } } |
Как это работает:
- Анимация бесконечная, потому что стоит
infinite, и равномерная —linear. padding-left: 100%отодвигает текст вправо, за пределы контейнера.transform: translateX(-100%)возвращает его влево, прокручивая через весь контейнер.
Проблема
Основная проблема этого эффекта, нужно задать адекватное время animation-duration. А оно зависит от длины текста, т.е. анимация не универсальна по отношению к разным текстам. Это можно решить различными программными способами через js или back-end, вычисляя и подменяя параметр animation-duration в стилях контейнера.
|
1 2 3 |
<div class="marquee-text" style="animation-duration: 5s"> Это бегущая строка на чистом CSS — просто и эффективно! </div> |
Вариации
Можно сделать движение в обратную сторону, просто поменяв направление анимации.
Можно увеличить время (animation-duration) для более медленного эффекта.
Добавить паузу при наведении (попробуйте в демке):
|
1 2 3 |
.marquee-container:hover .marquee-text { animation-play-state: paused; } |