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

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

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

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

方式一:

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

希望对你有所启发

相关推荐
代码的余温1 分钟前
Web服务器VS应用服务器:核心差异解析
运维·服务器·前端
一涯6 分钟前
日常小常识记录
前端
那一抹阳光多灿烂12 分钟前
CSS 编码规范
前端·css
degree52014 分钟前
CSS :has() 选择器详解:为什么它是“父选择器”?如何实现真正的容器查询?
前端·css·css3
૮・ﻌ・16 分钟前
CSS高级技巧---精灵图、字体图标、布局技巧
前端·css
昔人'16 分钟前
纯`css`固定标题并在滚动时为其添加动画
前端·css
超人不会飛18 分钟前
Vue markdown组件 | 流式 | 大模型应用
前端·javascript·github
三角叶蕨19 分钟前
javaweb CSS
css·web
ice breaker20 分钟前
tailwindcss 究竟比 unocss 快多少?
css·unocss·tailwindcss
小白640221 分钟前
前端梳理体系从常问问题去完善-基础篇(html,css,js,ts)
前端·css·html