CSS-анимация: как сделать бесконечную бегущую строку на Tailwind CSS

Старый HTML-тег <marquee> давно мертв и считается плохой практикой. Но сам эффект "бегущей строки" жив и отлично смотрится в проектах. Его можно использовать для анонсов, важных ссылок или, как у нас в шапке, просто для "стиля" =).

Подключать для этой задачи JavaScript — избыточно. Мы сделаем это на чистом CSS, используя всю мощь Tailwind CSS и его файла input.css.

В этом туториале мы добавим бесконечную бегущую строку рядом с логотипом в header.php.

Шаг 1. Создаем CSS-анимацию в `input.css`

Мы могли бы добавить анимацию в tailwind.config.js, но для одной-единственной кастомной анимации проще и надежнее определить ее прямо в input.css.

Открываем public/css/input.css и добавляем в самый конец файла этот код:

/* 💥 НОВЫЙ КОД ДЛЯ БЕГУЩЕЙ СТРОКИ 💥 */

/* Определяем саму анимацию (keyframes)
  Назовем ее 'marquee-anim'
*/
@keyframes marquee-anim {
    0% {
        /* Начинаем с позиции 0 */
        transform: translateX(0);
    }
    100% {
        /* Двигаем влево ровно на 50% ширины.
         Это — главный трюк! Он работает, потому что наш 
         HTML-блок будет состоять из ДВУХ одинаковых
         копий текста. Сдвигаясь на 50% (длину одной копии),
         лента идеально "зацикливается".
        */
        transform: translateX(-50%);
    }
}

/* Определяем класс, который будет применять эту анимацию.
  Мы используем @layer components, чтобы Tailwind 
  правильно его обработал.
*/
@layer components {
    .marquee-content {
        /* Применяем анимацию:
         - marquee-anim: наше название
         - 60s: длительность (60 секунд). Чем больше, тем медленнее.
         - linear: скорость всегда одинаковая
         - infinite: повторять бесконечно
        */
        animation: marquee-anim 60s linear infinite;
        
        /* Также "пришиваем" к этому классу нужные утилиты 
         Tailwind с помощью @apply
        */
        @apply whitespace-nowrap flex-shrink-0 flex;
    }
}

Шаг 2. HTML-структура в `header.php`

Теперь нам нужен HTML. Вся магия заключается в двух блоках: "окно" и "лента".

• "Окно" (Родитель): Это видимый блок (например, w-64), который обрезает все лишнее с помощью overflow-hidden.
• "Лента" (Потомок): Это блок с нашим классом .marquee-content, который будет двигаться.

Открываем public/header.php и находим код логотипа. Меняем его на эту структуру, где логотип и бегущая строка находятся в одном flex-контейнере:

<!-- 1. Логотип (Logo) и Бегущая строка -->
<div class="flex-shrink-0 flex items-center gap-6">
    
    <!-- Логотип -->
    <a href="/" class="logo-animate text-2xl lg:text-3xl">
        <span class="logo-text">Tech</span><span class="logo-pink">4</span><span class="logo-text">Mania</span>
    </a>
    
    <!-- 
      "ОКНО"
      hidden lg:flex - прячем на мобильных
      w-64 - ширина "окна"
      overflow-hidden - обрезаем все, что не помещается
    -->
    <div class="hidden lg:flex items-center w-64 overflow-hidden">
        
        <!-- 
          "ЛЕНТА"
          Применяем наш класс .marquee-content
        -->
        <div class="marquee-content">
            
            <!-- 💥 БЛОК 1 (Ваш текст) 💥 -->
            <span class="mx-4 text-sm text-slate-400">Создание сайтов кодом без CMS и конструкторов</span>
            <span class="mx-4 text-sm text-cyan-400">Tailwind CSS / PHP / JS / MySQL</span>
            <span class="mx-4 text-sm text-slate-400">adm@tech4mania.ru</span>
            <span class="mx-4 text-sm text-cyan-400">Cоздаем красивые, быстрые и функциональные сайты</span>
            
            <!-- 
              💥 БЛОК 2 (ТОЧНАЯ КОПИЯ БЛОКА 1) 💥
              Это самый важный трюк для "бесконечности"
            -->
            <span class="mx-4 text-sm text-slate-400">Создание сайтов кодом без CMS и конструкторов</span>
            <span class="mx-4 text-sm text-cyan-400">Tailwind CSS / PHP / JS / MySQL</span>
            <span class="mx-4 text-sm text-slate-400">adm@tech4mania.ru</span>
            <span class="mx-4 text-sm text-cyan-400">Cоздаем красивые, быстрые и функциональные сайты</span>

        </div>
    </div>
</div>

Шаг 3. Собираем CSS

Мы внесли изменения в input.css, но они не появятся на сайте, пока не пересоберем output.css.

Открываем терминал и выполняем команду сборки, которая указана в package.json:

npm run build

Что в итоге?

Готово! Обновляем страницу, и видим плавную, бесконечную бегущую строку, созданную без единой строчки JavaScript.

Хотите изменить скорость? Просто поменяйте значение 60s в классе .marquee-content (в input.css) на любое другое (например, 30s — быстрее, или 90s — медленнее) и не забудьте снова выполнить npm run build.