Softonic

Генератор бегущей строки

Шаг 1 / 2
Далее

Бегущие заголовки, это то, как панели объявлений, биржевые тикеры и баннеры событий передают много информации на узкую полосу экрана. Этот генератор воссоздает классический эффект HTML <marquee> на чистой CSS-анимации @keyframes и transform: translateX(), поэтому эта техника продолжает работать во всех современных браузерах без устаревшего тега. Выберите сообщение, настройте скорость в секундах на цикл, задайте цвета и размер шрифта и посмотрите бегущую строку вживую, прежде чем воссоздать ее с помощью показанного ниже CSS.

Как создать бегущий баннер

  1. 1

    Введите сообщение

    Введите заголовок. Короткие строки (4-10 слов) лучше всего читаются на движущейся полосе.

  2. 2

    Выберите скорость

    Меньше секунд = быстрее прокрутка. 30-60 с на полный цикл подходят для тикеров в стиле новостей.

  3. 3

    Задайте цвета и размер

    Выберите цвет текста, фон полосы и размер шрифта, подходящий к высоте вашей шапки.

  4. 4

    Просмотрите вживую

    Демо анимируется в реальном времени, чтобы вы могли оценить читаемость до публикации.

  5. 5

    Воссоздайте на CSS

    Скопируйте показанный ниже паттерн `@keyframes` и `transform: translateX()` в свою таблицу стилей, чтобы воспроизвести бегущую строку на своем сайте.

Почему CSS-анимация вместо <marquee>

Тег <marquee> был объявлен устаревшим в HTML5 и помечен WHATWG как obsolete. Браузеры пока его отрисовывают, но инструменты доступности и валидаторы жалуются, и вы теряете тонкий контроль над плавностью и зацикливанием. Анимация transform: translateX() внутри overflow: hidden дает идентичное визуальное поведение с современным инструментарием.

Настройка скорости

Время прохождения зависит и от длительности, и от общей ширины. Грубое правило для вьюпорта 1200 px:

Длительность Ощущение Типичное применение
10-20 с Быстро, внимание Флеш-распродажи, срочные оповещения
30-45 с Новостной тикер Живые счета, панели заголовков
60-90 с Фоновое Вывески площадок, конференц-залы
120 с + Едва движется Декоративные баннеры люкс-брендов

Чек-лист доступности

  • Оберните полосу в role="marquee" или aria-live="off", чтобы экранные дикторы не переобъявляли сообщение каждый цикл.
  • Учитывайте уменьшенное движение с @media (prefers-reduced-motion: reduce) { animation: none; } и показывайте текст статично.
  • Держите коэффициент контраста не менее 4.5:1 между текстом и фоном; движущийся текст читать труднее, чем статичный.
  • Никогда не размещайте критическую информацию (юридические уведомления, цены, сообщения об ошибках) только внутри бегущей полосы.

Часто задаваемые вопросы

Нет. Предпросмотр, это <div> с overflow: hidden и CSS-анимацией @keyframes, которая двигает внутренний span с помощью translateX. Он валидируется как современный HTML5.

Добавьте animation-play-state: paused на hover-селектор контейнера. Некоторым пользователям это удобнее постоянного цикла.

Да. Измените конечное значение @keyframes с translateX(-100%) на translateX(100%) и начните с -100%, чтобы изменить направление. Полезно для RTL-языков.

Нет. CSS-трансформации выполняются на GPU, а текст, это обычный HTML внутри DOM, поэтому краулеры читают его нормально, и анимация не блокирует основной поток.

Все остается в вашем браузере, пока вы делаете предпросмотр. Ничего не загружается и не логируется.

Сопутствующие инструменты

Генератор названий городов

Создавайте вымышленные названия городов, посёлков, деревень и столиц для миростроения, карт, игр, историй и тестовых данных с короткими заметками к каждому результату.

Символы стрелок для копирования

Копируйте популярные Unicode-стрелки одним щелчком: прямые, двойные, диагональные, крючковые, круговые и треугольные для документов, чатов и дизайна.

Символ «меньше или равно»

Копируйте знак ≤ и связанные математические символы сравнения. Включает Unicode, HTML-сущности и разметку LaTeX для электронных таблиц, научных работ и веб-страниц.

Преобразователь текста для людей с дислексией

Переформатируйте вставленный текст в короткие абзацы и строки примерно по 72 символа для более лёгкого чтения. Скопируйте результат в любой документ, письмо или редактор.

Генератор проклятого текста

Превращайте обычный текст в проклятые буквы в стиле Zalgo, сложенные с использованием специальных символов комбинирования Unicode. Копируйте этот хаос в чаты, подписи или мемы.

Генератор имен персонажей

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

Инструмент доступен на других языках