提到跑马灯,你会想到怎么实现?
用<marquee></marquee>
标签实现?
上百度搜marquee
,第一条答案就告诉你——已废弃
用JS
实现一套?
这大概是目前最普遍的实现方式。
思路有很多,比如用js计算偏移量,用循环定时任务去移动偏移量。
可以是:
- 定时任务+transform
- 定时任务+scroll
不管是哪种方式,代码量少说也有100行左右,还需处理各种状态判断。
由于没有找到合适的方案(在我看来,不能直接拿来用的代码就不是好代码);
所以只能自己造轮子,今天刚出炉的,给你介绍一下。
用css
实现
本例方案:用纯CSS动画实现跑马灯。
思路:采用animation循环动画,搭配CSS属性做到循环滚动,再根据文案长短动态设置动画时长。
代码实现
标签:
<div className="marquee-root">
<div className="marquee-content">
跑马灯滚动起来……
</div>
</div>
css:
@keyframes marqueeAnim {
0% {
transform: translateX(100vw);
}
100% {
transform: translateX(-100%);
}
}
.marquee-content {
white-space: nowrap;
display: inline-block;
color: chocolate;
animation: marqueeAnim 5s linear 0s infinite;
}
.marquee-root {
width: 100%;
height: 30px;
text-align: left;
line-height: 30px;
overflow: hidden;
background-color: burlywood;
}
over
以上就是跑马灯的简单实现了。上面的跑马灯可以做到不管是多少文案,都能够展示完毕再进行下一次循环滚动。
但是在变换莫测的产线环境,文案可短可长,这种固定动画时长的方案可能会导致下面这种问题:
没错,有的快有的慢,文案很多的时候就快得离谱。
动态控制动画时间
根据文案的多少来决定动画时长。很简单,只要一行代码。
style={{ animationDuration: marqueeStrs.length * 0.2 + 5 + "s" }}
在你的动画div上面添加这个style
,marqueeStrs
是你的跑马灯文案,0.2
是时间系数,可以根据实际情况修改,+ 5
是添加时间基数,不然文案少的时候就飞起来了。
全代码:
//todo test data
const marqueeStrs = "跑马灯滚动起来…… 跑马灯滚动起来…… 跑马灯滚动起来…… ";
return (
<div className="App">
<div className="marquee-root">
<div
className="marquee-content"
style={{ animationDuration: marqueeStrs.length * 0.2 + 5 + "s" }}
>
{marqueeStrs}
</div>
</div>
</div>
);
前面的css不需要修改。
效果图对比:
可以看到两张图的速度基本相等。
小结
这个方案看起来很简单,但是有一些点是需要注意的。
white-space: nowrap;
可以让你的文案强制不换行。display: inline-block;
可以让你的跑马灯布局根据内容自适应。overflow: hidden;
父布局设置这个属性可以让跑马灯内容超出部分被隐藏。0%
时transform: translateX(100vw);
是为了让跑马灯从屏幕外开始移动。100%
时transform: translateX(-100%);
是为了让跑马灯布局滚动整个布局宽度(不是屏幕宽度),最后滚到屏幕外。
以上几个CSS样式是本次跑马灯实现的核心支撑。当然,还有最后的动态计算动画时间
也是核心步骤。
那么,你应该会了。
如果你有更好的方案,欢迎评论区留言,Show出你的代码!
暂无评论