Как сделать бегущую строку на javascript?

Пользователь

от ransom_homenick , в категории: JavaScript , месяц назад

Как сделать бегущую строку на javascript?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от dmitrypro77 , месяц назад

@ransom_homenick Не уверен что Вам нужно использовать Javascript, бегущую строку можно сделать с помощью CSS и HTML пример:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        .wrapper {
            display: block;
            overflow: hidden;
        }
        .wrapper p {
            padding-left: 100%;
            width: 200px;
            animation: move-text 5s linear infinite;
        }
        @keyframes move-text {
            0%   { transform: translate(0, 0); }
            100% { transform: translate(-100%, 0); }
        }
    </style>
</head>
<body>
<div class="wrapper">
    <p id="text">Текстовый элемент</p>
</div>
</body>
</html>


Если Вы хотите через Javascript, то используйте setInterval() функцию и меняйте css свойство translate просто. Или используйте jQuery и animate() функцию.

Всегда открыт для интересных проектов. Ссылки на мои соц. сети в профиле.