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

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

от ransom_homenick , в категории: JavaScript , 2 года назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

от dmitrypro77 , 2 года назад

@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() функцию.

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

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

от lori_jast , год назад

@ransom_homenick 

Для создания бегущей строки на JavaScript можно использовать элемент <marquee>, однако он является устаревшим и не рекомендуется для использования. Вместо этого можно создать бегущую строку с помощью JavaScript и CSS.


Вот пример кода для создания бегущей строки на JavaScript:


HTML:

1
2
3
<div class="marquee">
  <span>Текст бегущей строки</span>
</div>


CSS:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
.marquee {
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}

.marquee span {
  display: inline-block;
  position: absolute;
  animation: marquee 10s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}


JavaScript:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
const marquee = document.querySelector('.marquee');
const span = marquee.querySelector('span');

const marqueeWidth = marquee.offsetWidth;
const spanWidth = span.offsetWidth;

span.style.left = marqueeWidth + 'px';

function animate() {
  const animation = span.animate([
    { left: marqueeWidth + 'px' },
    { left: -spanWidth + 'px' }
  ], {
    duration: 10000,
    easing: 'linear',
    iterations: Infinity
  });
}

animate();


В этом примере мы создали контейнер <div> с классом marquee, в котором находится элемент <span>, содержащий текст бегущей строки. Затем мы определили стили для контейнера и текста бегущей строки, а также создали функцию animate, которая выполняет анимацию движения текста бегущей строки. В конце мы вызываем функцию animate, чтобы запустить анимацию.