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

Создание бегущей строки на JavaScript (или JS) может показаться сложной задачей, особенно если вы только начинаете изучать программирование. Однако с помощью базовых знаний HTML, CSS и JavaScript можно легко реализовать эту задачу. В данной статье мы подробно рассмотрим, как сделать бегущую строку, используя несколько подходов.

Что такое бегущая строка?

Бегущая строка — это элемент, который перемещается по экрану горизонтально или вертикально. На практике это часто используется для показа новостей, уведомлений или рекламных объявлений. В традиционном HTML был тег <marquee>, который обеспечивал эту функциональность, но сегодня этот тег считается устаревшим, и лучше использовать CSS и JavaScript для создания подобных эффектов.

Основные шаги для создания бегущей строки JS

Для того чтобы реализовать бегущую строку на JavaScript, необходимо пройти несколько шагов:

Создать HTML-элемент для вывода текста.
Оформить элемент с помощью CSS.
Добавить JavaScript для управления движением строки.

Шаг 1: Создание HTML-структуры

Начнем с того, что создадим базовую HTML-разметку для нашей строки. Нам нужен контейнер для строки и сам текст, который будет двигаться:

<div class="marquee-container">
  <div class="marquee-text">Это пример бегущей строки на JavaScript!</div>
</div>

Здесь marquee-container будет контейнером, а marquee-text — элементом, который будет перемещаться.

Шаг 2: Оформление CSS для бегущей строки

CSS помогает задать внешний вид и создать основу для анимации. Мы зададим ширину контейнера и используем свойства overflow и white-space, чтобы текст перемещался плавно:

.marquee-container {
  width: 100%;
  overflow: hidden;
  background-color: #f0f0f0;
}

.marquee-text {
  display: inline-block;
  padding-left: 100%;
  white-space: nowrap;
  animation: marquee 10s linear infinite;
}

Основное свойство здесь — это animation, которое вызывает анимацию строки. С помощью CSS мы также задаем скорость движения (в данном случае 10 секунд на один цикл) и определяем, что анимация будет бесконечной (infinite).

Анимация задается следующим образом:

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

Шаг 3: Добавление JavaScript для управления

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

Пример скрипта для динамического управления скоростью:

const marqueeText = document.querySelector('.marquee-text');
let speed = 10; // Скорость движения

function startMarquee() {
  marqueeText.style.animationDuration = `${speed}s`;
}

function changeSpeed(newSpeed) {
  speed = newSpeed;
  marqueeText.style.animationDuration = `${speed}s`;
}

document.addEventListener('DOMContentLoaded', startMarquee);

Здесь мы динамически устанавливаем скорость анимации с помощью JavaScript. Функция changeSpeed позволяет изменять скорость в зависимости от действий пользователя или других факторов.

Дополнительные функции для бегущей строки

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

function pauseMarquee() {
  marqueeText.style.animationPlayState = 'paused';
}

function resumeMarquee() {
  marqueeText.style.animationPlayState = 'running';
}

Эти функции можно привязать к событиям, например, к наведению мыши на строку:

marqueeText.addEventListener('mouseover', pauseMarquee);
marqueeText.addEventListener('mouseout', resumeMarquee);

Теперь при наведении на текст анимация остановится, а при отведении курсора возобновится.

Итог

Мы рассмотрели, как сделать бегущую строку JavaScript с использованием современных подходов, заменяя устаревший <marquee> на CSS-анимацию и JavaScript. С помощью этих инструментов можно настроить не только скорость и направление строки, но и добавить дополнительные функции, такие как пауза при наведении курсора. Эти техники могут быть полезны для создания динамических и интерактивных элементов на сайте.

Post Views: 15

Frontend Base