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

24 авг. 2024 г.

1 минута196 слов

Чтобы сделать бесконечную бегущую строку, вам понадобятся знания 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);
    }
}

Результат:

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