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

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

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

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

方式一:

根据页面宽度,生成多个元素。每个元素通过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颜色掌握不熟,根本难以实现。

希望对你有所启发

相关推荐
YongGit4 分钟前
探索 AI + MCP 渲染前端 UI
前端·后端·node.js
慧一居士42 分钟前
<script setup>中的setup作用以及和不带的区别对比
前端
RainbowSea1 小时前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴1 小时前
笨方法学python -练习14
java·前端·python
Mintopia1 小时前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
Mintopia1 小时前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Penk是个码农2 小时前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc
MrSkye2 小时前
🔥JavaScript 入门必知:代码如何运行、变量提升与 let/const🔥
前端·javascript·面试
白瓷梅子汤2 小时前
跟着官方示例学习 @tanStack-form --- Linked Fields
前端·react.js
爱学习的茄子2 小时前
深入理解JavaScript闭包:从入门到精通的实战指南
前端·javascript·面试