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

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

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

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

方式一:

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

希望对你有所启发

相关推荐
0wioiw015 分钟前
Flutter基础(前端教程④-组件拼接)
前端·flutter
花生侠39 分钟前
记录:前端项目使用pnpm+husky(v9)+commitlint,提交代码格式化校验
前端
一涯1 小时前
Cursor操作面板改为垂直
前端
我要让全世界知道我很低调1 小时前
记一次 Vite 下的白屏优化
前端·css
1undefined21 小时前
element中的Table改造成虚拟列表,并封装成hooks
前端·javascript·vue.js
蓝倾2 小时前
淘宝批量获取商品SKU实战案例
前端·后端·api
comelong2 小时前
Docker容器启动postgres端口映射失败问题
前端
花海如潮淹2 小时前
硬件产品研发管理工具实战指南
前端·python
用户3802258598242 小时前
vue3源码解析:依赖收集
前端·vue.js