Приготовим зацикленную бегущую строку на чистом ХТМЛ и ЦСС, без программирования.
Внутрь двух обёрток положите содержимое строки. Ширина содержимого должна быть больше ширины обёртки, чтобы анимация работала бесшовно. Само содержимое для бесшовности нужно продублировать.
Ограничьте первую обёртку по ширине и обрежьте вылезающее. Второй обёртке дайте ширину по содержимому и примените анимацию сдвига от 0 до −50% ширины. Чтобы изменить направление, допишите к анимации reverse или поменяйте местами значения в самой анимации.
@keyframes ticker {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.ticker {
background: #ffe43b;
color: #000;
font-family: system-ui;
font-size: 24px;
max-width: 40em;
overflow: hidden;
}
.ticker__in {
display: flex;
width: fit-content;
animation: ticker 10s linear infinite;
-webkit-transform-style: preserve-3d; /* Фикс возможного глюка с морганием в Сафари */
}
.ticker__item {
padding: .5em .75em;
white-space: nowrap;
-webkit-backface-visibility: hidden; /* Фикс возможного глюка с морганием в Сафари */
}<div class="ticker">
<div class="ticker__in">
<span class="ticker__item">Мультидисциплинарные советы</span>
<span class="ticker__item">Полезные лекции</span>
<span class="ticker__item">Бомбические курсы</span>
<span class="ticker__item">Лучшие в мире книги</span>
<span class="ticker__item">Суровая школа</span>
<span class="ticker__item">Инновационные дома</span>
<span class="ticker__item">Мультидисциплинарные советы</span>
<span class="ticker__item">Полезные лекции</span>
<span class="ticker__item">Бомбические курсы</span>
<span class="ticker__item">Лучшие в мире книги</span>
<span class="ticker__item">Суровая школа</span>
<span class="ticker__item">Инновационные дома</span>
</div>
</div>
Вуаля:
Добавьте стилей по вкусу, подгоните размеры. Подавайте после проверки в разных браузерах.
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.