JS文字无限滚动

2023-11-29 06:22:05

Web Animations API介绍

Web Animations API是一种用于创建和控制Web动画的JavaScript API。它提供了许多强大且易于使用的功能，包括：

定义动画的持续时间、延迟和迭代次数
创建关键帧以控制动画在不同时间点的状态
使用缓动函数来控制动画的速度和节奏
暂停、播放和停止动画
侦听动画事件

实现JS文字无限滚动

为了实现文字无限循环滚动的效果，我们将使用Web Animations API和JS关键帧。首先，我们需要创建一个包含要滚动的文字的HTML元素。然后，我们将使用Web Animations API创建一个关键帧动画，该动画将文字从顶部滚动到底部，然后从底部滚动到顶部，如此循环。

<div id="text-container">
  <p>文字无限循环滚动</p>
</div>

// 获取文字容器元素
const textContainer = document.getElementById('text-container');

// 创建关键帧动画
const animation = textContainer.animate([
  { transform: 'translateY(0%)' },
  { transform: 'translateY(-100%)' },
  { transform: 'translateY(0%)' }
], {
  duration: 5000, // 动画持续时间，单位为毫秒
  iterations: Infinity // 动画无限循环
});

// 暂停动画
textContainer.addEventListener('click', () => {
  animation.pause();
});

// 恢复动画
textContainer.addEventListener('mouseout', () => {
  animation.play();
});

鼠标滚动控制动画

为了使动画能够响应鼠标滚动，我们需要使用window.addEventListener()方法来侦听scroll事件。当滚动条滚动时，我们将使用animation.playbackRate属性来控制动画的速度。

// 侦听滚动事件
window.addEventListener('scroll', (e) => {
  // 获取滚动条滚动距离
  const scrollY = window.scrollY;

  // 根据滚动距离调整动画速度
  animation.playbackRate = 1 + (scrollY / 100);
});