Когда бегущая строка уместна

Такой элемент подходит для короткого дополнительного сообщения, которое не требует немедленной реакции. Для расписания, условий оплаты и длинного текста лучше обычный блок: человеку не придётся ждать нужного фрагмента или следить за движением. Сформулируйте цель элемента до написания кода. Если задача заключается только в привлечении внимания, сравните анимацию с контрастным заголовком, отступами и спокойным информационным баннером.

Не устанавливайте несколько движущихся полос на одной странице. Они конкурируют между собой и отвлекают от основного содержания. При SEO-продвижении сайта декоративный эффект не заменяет полезной структуры и понятного предложения. Важные сведения оставляйте в обычном HTML-тексте, а результат изменения оценивайте по удобству сценария, а не по субъективному ощущению «страница стала живее».

Подготовьте разметку и управление

В примере переключатель запускает движение только по желанию посетителя. Неподвижный текст служит основным представлением сообщения. Декоративный движущийся дубликат скрыт от вспомогательных технологий, чтобы они не повторяли одну фразу. Не добавляйте в скрытый от них блок ссылки, кнопки или другие интерактивные элементы. При нескольких экземплярах компонента используйте разные идентификаторы переключателей и соответствующие им подписи.

<div class="ticker">
  <input id="ticker-run" type="checkbox">
  <label for="ticker-run">Включить движение</label>
  <p class="ticker-static">Новые материалы в блоге</p>
  <div class="ticker-window" aria-hidden="true">
    <span>Новые материалы в блоге</span>
  </div>
</div>

Без стилей разметка останется читаемой, хотя декоративный повтор будет виден. В рабочем проекте подключайте стили компонента вместе с шаблоном. Переключатель использует стандартный элемент формы и доступен с клавиатуры. Подпись должна оставаться видимой: не заменяйте её неясной иконкой. Основной текст не исчезает после запуска, поэтому сообщение можно спокойно прочитать независимо от положения анимированного слоя.

Добавьте движение через CSS

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

.ticker-window { display: none; overflow: hidden; }
.ticker-window span {
  display: inline-block;
  min-width: 100%;
  white-space: nowrap;
  animation: ticker-pass 18s linear infinite;
}
.ticker input:checked ~ .ticker-window { display: block; }
@keyframes ticker-pass {
  from { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker input:checked ~ .ticker-window { display: none; }
}

Снятие отметки останавливает показ движущегося слоя, но оставляет статичный текст. Системное предпочтение уменьшенного движения также скрывает анимацию. Этот вариант намеренно не запускается при загрузке страницы. Если проекту требуется другой режим, отдельно продумайте управление, сохранение выбора и поведение без JavaScript. Не переносите пример в общий файл стилей без проверки конфликтов имён классов.

Почему не стоит использовать marquee

Тег marquee встречается в старых учебниках и до сих пор может отображаться браузером, но считается устаревшим. MDN рекомендует избегать его в новых проектах и использовать CSS-анимации с учётом предпочтения уменьшенного движения; см. описание элемента. Поэтому старые атрибуты скорости и направления не стоит делать основой нового компонента или технического задания.

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

Проверьте доступность и вёрстку

Откройте страницу на телефоне, увеличьте масштаб и пройдите управление клавиатурой. Убедитесь, что подпись переключателя читается, фокус виден, а длинная фраза не расширяет всю страницу. Включите системное уменьшение движения и проверьте отсутствие анимации. Отдельно проверьте сочетание с закреплённым меню и рекламными блоками: компонент не должен перекрывать текст или мешать нажать ссылку.

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