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

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

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

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

方式一:

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

希望对你有所启发

相关推荐
小周同学@32 分钟前
谈谈对this的理解
开发语言·前端·javascript
Wiktok35 分钟前
Pyside6加载本地html文件并实现与Javascript进行通信
前端·javascript·html·pyside6
一只小风华~39 分钟前
Vue:条件渲染 (Conditional Rendering)
前端·javascript·vue.js·typescript·前端框架
柯南二号41 分钟前
【大前端】前端生成二维码
前端·二维码
程序员码歌1 小时前
明年35岁了,如何破局?说说心里话
android·前端·后端
博客zhu虎康2 小时前
React Hooks 报错?一招解决useState问题
前端·javascript·react.js
灰海2 小时前
vue中通过heatmap.js实现热力图(多个热力点)热区展示(带鼠标移入弹窗)
前端·javascript·vue.js·heatmap·heatmapjs
王源骏3 小时前
LayaAir鼠标(手指)控制相机旋转,限制角度
前端
大虾写代码3 小时前
vue3+TS项目配置Eslint+prettier+husky语法校验
前端·vue·eslint
wordbaby3 小时前
用 useEffectEvent 做精准埋点:React analytics pageview 场景的最佳实践与原理剖析
前端·react.js