js实现文字滚动

实现文字滚动的几种方法

使用CSS动画实现滚动

通过CSS的@keyframes和transform属性可以实现平滑的文字滚动效果。

<style>
.scroll-text {
  white-space: nowrap;
  animation: scroll 10s linear infinite;
}
@keyframes scroll {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
</style>
<div class="scroll-text">这里是要滚动的文字内容</div>

使用JavaScript定时器

通过setInterval不断修改元素的scrollLeft属性实现水平滚动。

const container = document.getElementById('scroll-container');
let scrollPos = 0;
setInterval(() => {
  scrollPos += 1;
  container.scrollLeft = scrollPos;
  if(scrollPos >= container.scrollWidth - container.clientWidth) {
    scrollPos = 0;
  }
}, 20);

使用requestAnimationFrame

相比setInterval，requestAnimationFrame能提供更流畅的动画效果。

function marquee(element) {
  const speed = 1;
  let pos = 0;
  function animate() {
    pos += speed;
    element.style.transform = `translateX(${-pos}px)`;
    if(pos > element.scrollWidth) pos = 0;
    requestAnimationFrame(animate);
  }
  animate();
}
marquee(document.querySelector('.marquee'));

使用Web Components

创建一个可复用的跑马灯组件。

class MarqueeElement extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<div class="marquee-content">${this.textContent}</div>`;
    const content = this.querySelector('.marquee-content');
    let pos = 0;
    const animate = () => {
      pos += 1;
      content.style.transform = `translateX(${-pos}px)`;
      if(pos > content.scrollWidth) pos = 0;
      requestAnimationFrame(animate);
    };
    animate();
  }
}
customElements.define('marquee-element', MarqueeElement);

使用第三方库

考虑使用专门处理动画的库如GSAP实现更复杂的滚动效果。

import { gsap } from 'gsap';
gsap.to('.scrolling-text', {
  x: '-100%',
  duration: 10,
  ease: 'none',
  repeat: -1
});

垂直滚动实现

修改CSS动画实现垂直方向的文字滚动。

.vertical-scroll {
  height: 100px;
  overflow: hidden;
}
.vertical-scroll p {
  animation: scroll-up 10s linear infinite;
}
@keyframes scroll-up {
  0% { transform: translateY(100%); }
  100% { transform: translateY(-100%); }
}

响应式处理

添加窗口大小变化的监听，动态调整滚动速度。

window.addEventListener('resize', () => {
  // 根据窗口宽度重新计算速度
});