@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() функцию.
@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
, чтобы запустить анимацию.