Блог

Главная - Вопросы по программированию - Как я могу анимировать переполненный текст слева направо?

Как я могу анимировать переполненный текст слева направо?

#javascript #html #css

Вопрос:

Концепция проста: когда текст становится слишком длинным для контейнера, он будет бесконечно анимироваться (прокручиваться) слева направо и повторять эти процессы после того, как он достигнет конца.

Как мне следует это сделать?

 <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    </head>
    <body>
        <div class="auto-scroll">
            <p>
                This text should scroll. Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi commodi magni quo officia error ab veniam aspernatur. Quos ducimus, hic, maxime dicta optio quidem
                nostrum sint commodi velit, ut distinctio. And return to beginning.
            </p>
        </div>

        <style>
            .auto-scroll {
                background: black;
                padding: 18px;
            }
            .auto-scroll p {
                font-family: monospace;
                font-size: 18px;
                color: white;
                margin: 0;
                white-space: nowrap;
                overflow: auto;
            }

            .auto-scroll ::-webkit-scrollbar {
                height: 10px; /* will be 0px */
            }
            .auto-scroll ::-webkit-scrollbar-track {
                background: #000;
            }
            .auto-scroll ::-webkit-scrollbar-thumb {
                background: #fff;
            }
        </style>
    </body>
</html>

Ответ №1:

Вам не нужен javascript, вы можете сделать это в css, как в следующем коде

 div{
    width: 100%;
    background-color: black;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}
p{
    display: inline-block;
    color: #FFF;
    padding-left: 100%;
    animation: move 25s linear infinite;
}
@keyframes move {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
} 
 <div>
  <p>This text should scroll. Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi commodi magni quo officia error ab veniam aspernatur. Quos ducimus, hic, maxime dicta optio quidem nostrum sint commodi velit, ut distinctio. And return to beginning.</p>
</div>
Метки: