likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 63

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

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

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

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

方式一：

根据页面宽度，生成多个元素。每个元素通过js控制，每帧向左偏移一点像素。 如果偏移的元素不可见后，将此元素再移动到屏幕最右边。

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

方式二：

根据页面宽度，生成多个元素。每个元素通过js控制，通过setInterval每一秒向左偏移一些像素。 然后结合css的transition: all 1s linear;使得偏移更加顺滑。 如果偏移的元素不可见后，将此元素再移动到屏幕最右边。

使用此方法可以避免高频率计算元素位置，但是此方式控制起来更复杂，主要是因为，将元素移动到最右边的时候，也会触发transition ，需要额外逻辑控制在元素移到最右边的时候不触发transition。 并且在实际开发中发现。当窗口不可见时候动画实际会暂停，还需要控制当窗口隐藏时候，暂停setInterval。

方式三:

换一种思路。按顺序排列元素，多个子元素首位相接。将每个子元素通过animation: xxx 10s linear infinite; 从左到右移动。在一定范围内移动子元素，通过视觉错觉，像是整个大元素(盒子)都在移动。 此方式简单，并且无需JS，性能较好。

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

<!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,通过此方式创建多份文本副本，达到类似效果。 此方法性能最佳。但是对非文本无能为力。

<!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颜色掌握不熟，根本难以实现。

希望对你有所启发

转载自:https://juejin.cn/post/7273026570930257932
评论
请登录