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

В статье подробно рассматривается процесс создания бегущей строки на JavaScript с использованием HTML и CSS. Вплоть до подробностей изучаются особенности и приёмы реализации при помощи примера.

Бегущая строка JavaScript

Бегущая строка - это эффект, который позволяет пользователю видеть перемещающуюся строку в нижней части экрана. Этот эффект можно добавить на любой веб-странице с помощью JavaScript.

Для реализации бегущей строки нам понадобится функция, которая будет получать значение текста строки и перемещать его по экрану. Для этого мы можем использовать следующий код:

function scrollText(text) {
  let textLength = text.length;

  // Устанавливаем значение ширины элемента с текстом.
  let width = textLength * 10;
  
  // Создаем элемент с текстом.
  let scrollElement = document.createElement('div');
  scrollElement.innerHTML = text;
  scrollElement.style.width = width + 'px';
  
  // Добавляем элемент на страницу.
  document.body.appendChild(scrollElement);
  
  // Устанавливаем позицию элемента.
  let position = 0;
  setInterval(() => {
    // Обновляем позицию элемента.
    position -= 1;
    // Проверяем, не достигла ли позиция конца экрана.
    if (position < -width) {
      // Если да, то присваиваем позицию 0.
      position = 0;
    }
    // Обновляем позицию элемента.
    scrollElement.style.marginLeft = position + 'px';
  }, 50);
}

// Вызываем функцию.
scrollText('Текст для бегущей строки');

В этом примере мы создаем элемент div с текстом, который мы передаем в функцию, и добавляем его на страницу. Мы также задаем ширину элемента в зависимости от длины текста. Затем мы присваиваем переменной позицию 0. И после этого мы используем функцию setInterval(), чтобы обновлять позицию элемента каждые 50 миллисекунд. Как только позиция достигнет конца страницы, мы присвоим ей значение 0, так что текст начнет перемещаться сначала.

Таким образом, мы можем сделать бегущую строку на JavaScript, используя простые функции и элементы DOM API.