跑马灯：打造简洁高效的前端动效

2023-09-17 14:32:23

跑马灯，一种在前端开发中司空见惯的动效元素，它以其流畅的滚动效果，在各类网站和应用程序中扮演着举足轻重的角色。尽管市面上已有诸多封装好的跑马灯插件，但对于那些追求简洁高效的开发者而言，自己动手实现一个基本版的跑马灯总能带来别样的成就感。

实现原理

跑马灯的实现原理并不复杂，其核心思想在于：当滚动元素达到容器的边界时，巧妙地将其重新放置在容器的另一端，形成一个无缝循环的滚动效果。具体步骤如下：

创建滚动元素和容器： 首先，我们需要创建一个滚动元素，即跑马灯中的文字或图片内容，并将其置于一个容器元素中。
监听滚动事件： 接下来，为容器元素添加滚动事件监听器，当滚动发生时，我们需要捕获滚动距离，以便判断滚动元素是否已达到容器边界。
判断是否到达边界： 在滚动事件处理函数中，通过比较滚动距离和容器高度或宽度，即可判断滚动元素是否已触及边界。
重置滚动元素位置： 如果滚动元素已到达边界，我们需要将其重新放置在容器的另一端，实现无缝滚动效果。例如，当滚动元素向上滚动时，我们需要将其放置在容器底部，反之亦然。

HTML 代码

<div class="container">
  <div class="scroller">
    <!-- 滚动内容 -->
  </div>
</div>

CSS 代码

.container {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.scroller {
  width: 200%;  // 滚动内容宽度是容器的 2 倍，实现无缝循环
  animation: scroll 10s infinite;
}

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

JavaScript 代码

const container = document.querySelector('.container');
const scroller = document.querySelector('.scroller');

container.addEventListener('scroll', () => {
  if (scroller.getBoundingClientRect().right <= 0) {
    scroller.style.transform = 'translateX(0)';
  } else if (scroller.getBoundingClientRect().left >= container.clientWidth) {
    scroller.style.transform = 'translateX(-100%)';
  }
});