Реализация Marquee (бегущая строка) на сайте

Реализация Marquee (бегущая строка) на сайте

Бегущая строка — один из самых простых эффектов, но с несколькими нетривиальными деталями: бесшовное повторение, реакция на скорость скролла, hover-пауза, разные направления для разных строк.

CSS-реализация

Чистый CSS без JS — для простых случаев с фиксированным контентом:

<div class="marquee">
  <div class="marquee__track">
    <span class="marquee__item">React</span>
    <span class="marquee__item">Vue</span>
    <span class="marquee__item">TypeScript</span>
    <span class="marquee__item">Node.js</span>
    <!-- Дублируем для бесшовности -->
    <span class="marquee__item" aria-hidden="true">React</span>
    <span class="marquee__item" aria-hidden="true">Vue</span>
    <span class="marquee__item" aria-hidden="true">TypeScript</span>
    <span class="marquee__item" aria-hidden="true">Node.js</span>
  </div>
</div>

.marquee {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
}

.marquee__track {
  display: inline-flex;
  gap: 60px;
  animation: marquee-scroll 20s linear infinite;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* -50% потому что контент продублирован */

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

/* Обратное направление */
.marquee--reverse .marquee__track {
  animation-direction: reverse;
}

/* Градиентные маски по краям */
.marquee {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black 10%,
    black 90%,
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    black 10%,
    black 90%,
    transparent
  );
}

JavaScript-реализация с динамическим клонированием

Когда контент динамический — количество клонов рассчитывается автоматически под ширину контейнера:

class Marquee {
  private container: HTMLElement
  private track: HTMLElement
  private items: HTMLElement[]
  private speed: number
  private direction: 1 | -1
  private position = 0
  private itemWidth = 0
  private rafId: number | null = null
  private isPaused = false

  constructor(container: HTMLElement, options: {
    speed?: number
    direction?: 'left' | 'right'
    pauseOnHover?: boolean
    gap?: number
  } = {}) {
    this.container = container
    this.track = container.querySelector('[data-marquee-track]')!
    this.speed = options.speed ?? 1
    this.direction = options.direction === 'right' ? 1 : -1
    const gap = options.gap ?? 40

    this.items = Array.from(this.track.children) as HTMLElement[]
    this.track.style.gap = `${gap}px`

    this.cloneItems()
    this.measureItems()

    if (options.pauseOnHover !== false) {
      container.addEventListener('mouseenter', () => { this.isPaused = true })
      container.addEventListener('mouseleave', () => { this.isPaused = false })
    }

    this.start()
    window.addEventListener('resize', this.onResize)
  }

  private cloneItems() {
    // Клонируем пока суммарная ширина > ширина контейнера * 2
    const containerWidth = this.container.offsetWidth

    while (this.track.offsetWidth < containerWidth * 2 + 100) {
      this.items.forEach((item) => {
        const clone = item.cloneNode(true) as HTMLElement
        clone.setAttribute('aria-hidden', 'true')
        this.track.appendChild(clone)
      })
    }
  }

  private measureItems() {
    const allItems = this.track.children
    let total = 0
    const gap = parseInt(getComputedStyle(this.track).gap) || 0

    Array.from(allItems).forEach((item, i) => {
      total += (item as HTMLElement).offsetWidth
      if (i < allItems.length - 1) total += gap
    })

    // Ширина одного "оригинального" набора
    this.itemWidth = total / (this.track.children.length / this.items.length)
  }

  private start() {
    const tick = () => {
      if (!this.isPaused) {
        this.position += this.speed * this.direction

        // Сброс позиции для бесшовной петли
        if (this.direction === -1 && Math.abs(this.position) >= this.itemWidth) {
          this.position += this.itemWidth
        } else if (this.direction === 1 && this.position >= 0) {
          this.position -= this.itemWidth
        }

        this.track.style.transform = `translateX(${this.position}px)`
      }

      this.rafId = requestAnimationFrame(tick)
    }

    this.rafId = requestAnimationFrame(tick)
  }

  private onResize = () => {
    this.measureItems()
  }

  // Изменить скорость динамически (например, при скролле)
  setSpeed(speed: number) {
    this.speed = speed
  }

  destroy() {
    if (this.rafId) cancelAnimationFrame(this.rafId)
    window.removeEventListener('resize', this.onResize)
  }
}

// Инициализация
document.querySelectorAll<HTMLElement>('[data-marquee]').forEach((el) => {
  new Marquee(el, {
    speed: parseFloat(el.dataset.marqueeSpeed || '1'),
    direction: el.dataset.marqueeDirection as 'left' | 'right',
    gap: 60,
  })
})

Реакция на скорость скролла

Эффект: строка ускоряется при быстром скролле и замедляется при остановке.

let scrollVelocity = 0
let lastScrollY = window.scrollY

window.addEventListener('scroll', () => {
  const currentY = window.scrollY
  scrollVelocity = currentY - lastScrollY
  lastScrollY = currentY
}, { passive: true })

// В RAF loop маркера — обновляем скорость с damping
let currentSpeed = baseSpeed

function updateMarqueeSpeed() {
  const targetSpeed = baseSpeed + Math.abs(scrollVelocity) * 0.5
  currentSpeed += (targetSpeed - currentSpeed) * 0.1
  scrollVelocity *= 0.9  // затухание

  marquee.setSpeed(currentSpeed)
  requestAnimationFrame(updateMarqueeSpeed)
}

Вертикальный marquee

Тот же принцип, по оси Y:

.marquee--vertical {
  overflow: hidden;
  height: 400px;
}

.marquee--vertical .marquee__track {
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: marquee-vertical 15s linear infinite;
}

@keyframes marquee-vertical {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

React-компонент

import { useEffect, useRef } from 'react'

interface MarqueeProps {
  children: React.ReactNode
  speed?: number
  direction?: 'left' | 'right'
  pauseOnHover?: boolean
  className?: string
}

export function Marquee({
  children,
  speed = 30,
  direction = 'left',
  pauseOnHover = true,
  className,
}: MarqueeProps) {
  const animStyle: React.CSSProperties = {
    display: 'flex',
    gap: '60px',
    animationDuration: `${speed}s`,
    animationTimingFunction: 'linear',
    animationIterationCount: 'infinite',
    animationName: 'marquee-scroll',
    animationDirection: direction === 'right' ? 'reverse' : 'normal',
  }

  return (
    <div
      className={`overflow-hidden whitespace-nowrap ${className}`}
      style={pauseOnHover ? undefined : undefined}
    >
      <style>{`
        @keyframes marquee-scroll {
          from { transform: translateX(0); }
          to { transform: translateX(-50%); }
        }
      `}</style>
      <div
        style={animStyle}
        className={pauseOnHover ? 'hover:[animation-play-state:paused]' : ''}
      >
        {children}
        <span aria-hidden="true" style={{ display: 'contents' }}>{children}</span>
      </div>
    </div>
  )
}

Сроки

CSS-вариант с паузой и двумя направлениями — 2–3 часа. JS-реализация с динамическим клонированием, реакцией на скролл и React-компонентом — 1 день.