Бегущая строка на HTML и CSS

24 авг. 2024 г.
1 минута188 слов

Для верстки бегущей строки понадобятся знания HTML и CSS. С помощью этого руководства вы сможете сделать анимированную бегущую строку с текстом, логотипами или произвольными блоками.

Создадим HTML-разметку бегущей строки. Разметка состоит из обертки stroke и двух одинаковых блоков stroke__item внутри нее.

HTML разметка бегущей строки

<div class="stroke">
      <p class="stroke__item">для сбора базы, для реактивации, для повышения лояльности, для роста продаж,&nbsp;</p>
      <p class="stroke__item">для сбора базы, для реактивации, для повышения лояльности, для роста продаж,&nbsp;</p>
</div>

Давайте оживим и украсим бегущую строку с помощью CSS. С помощью display: flex у родительского блока размещаем строки в одну линию, ограничим максимальную ширину бегущей строки и скроем все, что будет выходить за пределы контейнера с помощью overflow: hidden.

Дочерним блокам с текстом зададим параметры шрифта и анимацию.

CSS бегущей строки

.stroke {
    display: flex;
    width: 100vw;
    max-width: 3000px;
    margin: 0 auto;
    overflow: hidden;
}
 
.stroke__item {
    flex-shrink: 0;
    font-size: clamp(1.125rem, 0.8023rem + 1.2064vw, 2.25rem);
    line-height: 1.5;
    font-weight: 900;
    text-transform: uppercase;
    animation: running-animation 20s linear infinite;
    white-space: nowrap;
}
 
@keyframes running-animation {
    0% {
        transform: translateZ(0);
    }
 
    100% {
        transform: translate3d(-100%, 0, 0);
    }
}

Результат:

Таким образом можно делать бегущие строки не только с текстом, но и с любыми другими элементами, например логотипами.