Softonic

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

Шаг 1 / 3

Напишите сообщение

Одна строка, до 500 символов. Эмодзи тоже поддерживаются.

Далее: оформление

Бегущие заголовки, это то, как панели объявлений, биржевые тикеры и баннеры событий передают много информации на узкую полосу экрана. Этот генератор воссоздает классический эффект 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-селектор контейнера. Некоторым пользователям это удобнее постоянного цикла.

Да. Добавьте animation-direction: reverse к элементу с анимацией (.scrolling-text__track в сгенерированном коде). Две копии текста сохраняют бесшовный цикл в обоих направлениях, что удобно для RTL-языков.

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

Ваше сообщение остаётся в браузере. Оно не отправляется на наши серверы и не добавляется в ссылку на страницу. Эта вкладка хранит его только для того, чтобы показать на следующем шаге, а кнопка «Начать сначала» или закрытие вкладки его удаляют. Настройки отображения (скорость, направление, шрифт, размер, цвета и эффекты) передаются между шагами в ссылке на страницу.

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

Переводчик стандартного галактического алфавита

Переведите английский в стандартный галактический алфавит, рунический шифр из Commander Keen, стола зачарования Minecraft и Ready Player Two.

Подбор слов для Wordle

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

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

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

Генератор текста для мемов

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

Переводчик иконок

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

Генератор странного текста

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

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