前端实现无缝自动滚动动画

news2024/11/20 11:30:30

1. 前言: 前端使用HTML+CSS实现一个无缝滚动的列表效果

示例图:

示例图

2. 源码

html部分源码:

<!--
 * @Author: wangZhiyu <w3209605851@163.com>
 * @Date: 2024-07-05 23:33:20
 * @LastEditTime: 2024-07-05 23:49:09
 * @LastEditors: wangZhiyu <w3209605851@163.com>
 * @FilePath: \无缝自动滚动动画\index.html
 * @Descripttion: 无缝自动滚动动画
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>无缝自动滚动动画</title>
  <link rel="stylesheet" href="./index.css">
</head>

<body>
  <div class="container">
    <div class="scrollArea">
      <!-- 第一段内容 -->
      <div class="item">内容1</div>
      <div class="item">内容2</div>
      <div class="item">内容3</div>
      <div class="item">内容4</div>
      <div class="item">内容5</div>

      <!-- 重复循环一次第一段内容 -->
      <div class="item">内容1</div>
      <div class="item">内容2</div>
      <div class="item">内容3</div>
      <div class="item">内容4</div>
      <div class="item">内容5</div>
    </div>
  </div>
</body>

</html>

css部分源码:

* {
  margin: 0;
  padding: 0;
}

/* 大盒子样式设置,注意大盒子必须要指定宽度,并且设置overflow属性为hidden */
.container {
  width: 200px;
  margin: 0 auto;
  margin-top: 200px;
  height: 125px;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.05);
  text-align: center;
}

/* 大盒子的子元素,列表内容的父元素,设置滚动动画 */
.scrollArea {
  /* 设置里的动画时长根据不同的情况设置即可 */
  animation: scroll 3s linear infinite;
}

/* 设置当鼠标悬停时,自动挺尸滚动 */
.scrollArea:hover {
  animation-play-state: paused;
}

/* 滚动动画 */
@keyframes scroll {
  0% {
  }
  100% {
    transform: translateY(-50%);
  }
}

3. 原理解释:

为什么需要两个相同的列表:

答: 因为当第一个列表滚动到顶部时,第二个列表也会随之向上滚动,就形成了视差效果,向上滚动了一个元素区域,下面就填充进来了一个元素区域,并且当滚动完毕之后,会重新回到初识位置继续滚动,也会形成视差效果,由此实现了无缝滚动
为什么需要在大盒子与列表元素之间再添加一个盒子进去:

答: 这个盒子的主要作用是用来滚动的,因为大盒子设置了overflow:hidden,所以大盒子与列表元素中间的盒子滚动时是不会超出大盒子的范围的,并且这个盒子也起到了显示元素的显示范围的作用