Эффект бегущей строки на CSS

Бегущая строка — это классический визуальный элемент, в котором текст непрерывно движется по экрану. В старом HTML для этого использовался тег <marquee>, но он устарел. Вместо него сейчас можно сделать более гибкую и красивую реализацию на CSS.

Это статья из цикла заметок по CSS анимации и эффектам.

Что мы будем использовать:

  • контейнер фиксированной ширины с overflow: hidden;
  • текстовый блок, который движется с помощью @keyframes и animation.

Пример того, как это выглядит (реализован также эффект остановки анимации при наведении):

Это бегущая строка на чистом CSS — просто и эффективно!

Вот пример на чистом CSS / HTML

Можно заменить 🔄 на любую SVG-иконку, например из Font Awesome или другого набора.

Стили:

Как это работает:

  • Анимация бесконечная, потому что стоит infinite, и равномерная — linear.
  • padding-left: 100% отодвигает текст вправо, за пределы контейнера.
  • transform: translateX(-100%) возвращает его влево, прокручивая через весь контейнер.

Проблема

Основная проблема этого эффекта, нужно задать адекватное время animation-duration. А оно зависит от длины текста, т.е. анимация не универсальна по отношению к разным текстам. Это можно решить различными программными способами через js или back-end, вычисляя и подменяя параметр animation-duration в стилях контейнера.

Вариации

Можно сделать движение в обратную сторону, просто поменяв направление анимации.

Можно увеличить время (animation-duration) для более медленного эффекта.

Добавить паузу при наведении (попробуйте в демке):

Мало букафф? Читайте есчо !

Анимация ожидания загрузки/обновления, используя CSS3

Октябрь 26, 2015 г.

Одна из типичных задач для улучшения пользовательского интерфейса на сайтах - это визуализация ожидания загрузки/обновления страницы. Наиболее частый случай ...

Читать

Анимация подчеркивания текста при наведении

Апрель 28, 2025 г.

Классический эффект: при наведении на ссылку или текст появляется анимированное подчеркивание. Вместо обычного text-decoration: underline, подчеркивание создаётся с помощью псевдоэлементов (::after или ::before) и плавно анимируется. Это выглядит современно ...

Читать

Плавающее движение вверх-вниз с помощью CSS

Май 1, 2025 г.

Этот эффект создаёт иллюзию, будто элемент "плавает" в воздухе — мягко покачиваясь вверх и вниз. Он отлично подходит для украшений, иконок, стрелок прокрутки или просто акцентов, которые должны привлекать внимание, но не быть слишком навязчивыми. Это ...

Читать

CSS-анимация: Эффект пульсации

Май 1, 2025 г.

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

Читать
 

Комментарии к «Эффект бегущей строки на CSS»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: