欢迎关注: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" )
})
}
其实,这段代码就做了一件事情:鼠标移入 停止动画。
温馨提示
更多博文,请关注:xssy5431 小拾岁月,回复循环滚动,获取源码