• Главная
  • Бесконечная лента текста (анимация css)

Бесконечная лента текста (анимация css)

10 мая 2021

HTML

<div class="text-caruisel">
    <div class="text-caruisel--cont">
        <span data-text="We are trusted by over 25,000 clients across the world to power stunning websites.">We are trusted by over 25,000 clients across the world to power stunning websites.</span>
    </div>
</div>

LESS

.text-caruisel{
    overflow: hidden;
    pointer-events: none;
    margin-top: 70px;

    .text-caruisel--cont{
        position: relative;
        float: left;
        z-index: 0;
        pointer-events: none;
    }
    span{
        display: block;
        font-size: 100px;
        font-weight: 600;
        animation: content-marquee 15s infinite linear;
        white-space: nowrap;
        padding-left: 2vw;

        @keyframes content-marquee {
            0% {
                transform: translateX(0)
            }
            100% {
                transform: translateX(-50%)
            }
        }
        &::after{
            content: attr(data-text);
            padding-left: 2vw;
        }
    }
}
Закажите у меня разработку сайта под ключ
и получите логотип в подарок в векторе и с исходниками
Заказать разработку
Контакты

Работаем: с ПН по ПТ, с 08:00 до 16:00 (МСК)
Отдыхаем: в СБ и ВС, чтобы быть в тонусе
и реализовывать самые сложные идеи