创建一个可以循环滚动的文本,可能没这么简单。

如何创建一个可以向左循环滚动的文本?

创建如上图效果的滚动文本,你能想到几种方式?

-------- 暂停阅读,不如你自己先试一下 --------

方式一:

根据页面宽度,生成多个元素。每个元素通过js控制,每帧向左偏移一点像素。

如果偏移的元素不可见后,将此元素再移动到屏幕最右边。

此方式容易理解,实现起来也不困难,但是有性能上的风险,因为每一帧都在修改元素的位置。

方式二:

根据页面宽度,生成多个元素。每个元素通过js控制,通过setInterval每一秒向左偏移一些像素。

然后结合css的transition: all 1s linear;使得偏移更加顺滑。

如果偏移的元素不可见后,将此元素再移动到屏幕最右边。

使用此方法可以避免高频率计算元素位置,但是此方式控制起来更复杂,主要是因为,将元素移动到最右边的时候,也会触发transition ,需要额外逻辑控制在元素移到最右边的时候不触发transition

并且在实际开发中发现。当窗口不可见时候动画实际会暂停,还需要控制当窗口隐藏时候,暂停setInterval

方式三:

换一种思路。按顺序排列元素,多个子元素首位相接。将每个子元素通过animation: xxx 10s linear infinite;

从左到右移动。在一定范围内移动子元素,通过视觉错觉,像是整个大元素(盒子)都在移动。

此方式简单,并且无需JS,性能较好。

下面是完整代码(可以控制浏览器宽度,查看不同尺寸屏幕的效果)

html 复制代码
<!doctype html>  
<html>  
<head>  
<title>LOOP</title>  
<style>  
@keyframes loop {  
0% {  
transform: translateX(0);  
}  
100% {  
transform: translateX(-100%);  
}  
}  
  
.box {  
white-space: nowrap;  
}  
  
.scrollContent {  
width: 600px;  
display: inline-block;  
text-align: center;  
animation: loop 3s linear infinite;  
}  
</style>  
</head>  
<body>  
<div class="box">  
<div class="scrollContent">  
这是一段可以滚动的文本  
</div>  
<div class="scrollContent">  
这是一段可以滚动的文本  
</div>  
<div class="scrollContent">  
这是一段可以滚动的文本  
</div>  
<div class="scrollContent">  
这是一段可以滚动的文本  
</div>  
<div class="scrollContent">  
这是一段可以滚动的文本  
</div>  
<div class="scrollContent">  
这是一段可以滚动的文本  
</div>  
</div>  
</body>  
  
</html>  
  

方式四:

方式三会创建多份一样的文本内容,你可能会说,屏幕上同时出现这么多文本元素,当然要创建这么多一样的内容。

其实还有一种性能更佳的方式:text-shadow: 600px 0 currentColor,通过此方式创建多份文本副本,达到类似效果。

此方法性能最佳。但是对非文本无能为力。

html 复制代码
<!doctype html>  
<html>  
<head>  
<title>LOOP</title>  
<style>  
@keyframes loop {  
0% {  
transform: translateX(0);  
}  
100% {  
transform: translateX(-100%);  
}  
}  
  
.box {  
white-space: nowrap;  
}  
  
.scrollContent {  
color: rebeccapurple;  
width: 600px;  
display: inline-block;  
text-align: center;  
animation: loop 3s linear infinite;  
text-shadow: 600px 0 currentColor, 1200px 0 currentColor, 1800px 0 currentColor, 2400px 0 currentColor;  
}  
</style>  
</head>  
<body>  
<div class="box">  
<div class="scrollContent">  
这是一段可以滚动的文本  
</div>  
</div>  
</body>  
  
</html>  

总结

方式1:应该是最直接想到的方式。但是出于对性能的担忧。

方式2:由于方式1性能优化得到,但是方式2过于复杂。 方式3: 看上去非常易于实现,实际很难想到。 方式4:如果对text-shadow和css颜色掌握不熟,根本难以实现。

希望对你有所启发

相关推荐
艾小逗2 小时前
vue3中的effectScope有什么作用,如何使用?如何自动清理
前端·javascript·vue.js
小小小小宇4 小时前
手写 zustand
前端
Hamm5 小时前
用装饰器和ElementPlus,我们在NPM发布了这个好用的表格组件包
前端·vue.js·typescript
小小小小宇6 小时前
前端国际化看这一篇就够了
前端
大G哥6 小时前
PHP标签+注释+html混写+变量
android·开发语言·前端·html·php
whoarethenext6 小时前
html初识
前端·html
小小小小宇6 小时前
一个功能相对完善的前端 Emoji
前端
m0_627827526 小时前
vue中 vue.config.js反向代理
前端
Java&Develop6 小时前
onloyoffice历史版本功能实现,版本恢复功能,编辑器功能实现 springboot+vue2
前端·spring boot·编辑器
白泽talk6 小时前
2个小时1w字| React & Golang 全栈微服务实战
前端·后端·微服务