“拿来主义”学习无限滚动动画（附源码）

欢迎关注：xssy5431 小拾岁月
参考链接：https://mp.weixin.qq.com/s/xVTCwR1ZSn5goWmc2yimVA

动画效果

需求分析

需求中涉及无线滚动，说明需要使用 animation 动画。另外，为了方便用户点击操作，需要给滚动对象添加鼠标 移入移出 操作。

其中，既然是 无限滚动，那么在所有元素滚动结束后，如何做动画衔接就变得尤为重要。

无限滚动效果中的 动画延迟 ，需要根据实际情况做调整，以保证动画的连贯性。

页面布局

<section class="container"><div class="item-group" style="--delay:-1"><div class="item-box"><div class="img"><img src="./img/A1.jpeg" alt=""></div><div class="desc"><span class="name">张良 (第1名)</span><p class="lines">君子不立危墙之下</p></div></div><div class="follow-btn" >关注</div></div><div class="item-group" style="--delay:0">此处省略部分代码</div><div class="item-group" style="--delay:2">此处省略部分代码</div><div class="item-group" style="--delay:2">此处省略部分代码</div></section>

注意

页面布局中，采用数组的格式布局多个元素，保持页面风格统一。
其中 css样式 中声明了变量 –daplay ，但是其中的值不同，这个是关键。
特别注意：元素的动画延迟时间成 等差数列，但是最后一个元素的延迟时间，与前一个元素相同，这是为了保持 动画的连贯。

CSS样式(SCSS版)

* {margin: 0;padding: 0;font-size: 12px;list-style: none;text-decoration: none;
}.container {box-sizing: border-box;width: 100%;min-height: 100vh;padding: 0 5em;display: flex;align-items: center;justify-content: center;margin: 0 auto;background: linear-gradient(to bottom, #bea2e7 0%, #86b7e7 100%);line-height: 24px;&.no-animation {.item-group {animation-play-state: paused;}}.item-group {background: #fff;max-width: 460px;display: flex;justify-content: space-between;align-items: center;border-radius: 100px 20px 20px 100px;padding: 6px 20px 6px 6px;animation: animate 15s linear infinite;animation-delay: calc(3s * var(--delay));position: absolute;opacity: 0;&:last-child {animation-delay: calc(-3s * var(--delay));}.item-box {display: flex;align-items: center;.img {width: 90px;height: 90px;img {width: 100%;height: 100%;border-radius: 50%;box-shadow: 0 0 10px #888888;}}.desc {margin-left: 20px;.name {font-size: 18px;font-weight: bold;}.lines{font-size: 14px;color: #333;}}}.follow-btn {font-size: 14px;letter-spacing: 4px;margin-left: 15px;border-radius: 16px;font-weight: bold;padding: 5px 26px;color: #fff;background: linear-gradient(to bottom, #bea2e7 0%, #86b7e7 100%);}.del-follow-btn{font-size: 14px;letter-spacing: 4px;margin-left: 15px;border-radius: 16px;font-weight: bold;padding: 5px 26px;color: #fff;background: linear-gradient(to bottom, #1f1f1f 0%, #a8a8a8 100%);}}
}@keyframes animate {0% {opacity: 0;transform: translateY(100%) scale(0.5);}5%,20% {opacity: 0.4;transform: translateY(100%) scale(0.7);}25%,40% {opacity: 1;z-index: 1;pointer-events: auto;transform: translateY(0%) scale(1);}45%,60% {opacity: 0.4;transform: translateY(-100%) scale(0.7);}65%,100% {opacity: 0;transform: translateY(-100%) scale(0.5);}
}

注意事项

此处 css 样式，为了清晰的对照页面结构，我采用了 scss 编写。
开发时，可安装 Live Sass Compiler 将 scss 实时编译为 css ，我们在引入时，依然采用 css 文件。

关键代码

  .item-group {background: #fff;max-width: 460px;display: flex;justify-content: space-between;align-items: center;border-radius: 100px 20px 20px 100px;padding: 6px 20px 6px 6px;animation: animate 15s linear infinite;animation-delay: calc(3s * var(--delay));position: absolute;opacity: 0;&:last-child {animation-delay: calc(-3s * var(--delay));}}

其中，animation: animate 15s linear infinite; 定义了无限循环动画， animation-delay: calc(3s * var(--delay)); 定义了动画的延迟时间，这个是动画中的重点，对最后一个滚动对象，做了 animation-delay: calc(3s * var(--delay)); 处理，使得页面动画连贯。

动画暂停

const containerBox = document.querySelector('.container');
const itemGroup = document.querySelectorAll(".item-group")
for (let i = 0; i < itemGroup.length; i++) {itemGroup[i].addEventListener("mouseover",()=>{containerBox.classList.add("no-animation" )})itemGroup[i].addEventListener("mouseout",()=>{containerBox.classList.remove("no-animation" )})
}