如图所示,今天看到一个很炫酷的双文字螺旋滚动特效,两行文字呈螺旋状变化,在网站中这样的效果对用户很有吸引力。本文将基于原网站解析如何实现这个炫酷的效果,基于这个动图可以分析出需要实现的要点:
- 文字呈螺旋状滚动
- 滚动过程中文字大小变化
- 动画过程无缝链接
- 两行文字滚动
实现过程
文字展示
为了方便更改文案将文案定义变量,通过JS代码动态创建DOM,定义文案、螺旋的角度以及动画的持续时间:
将文案创建元素添加到页面中:
因为有2行文字滚动,所以这里添加了2个spiral
。
给 spiral
设置flex
布局,此时的页面效果如下:
让文字动起来
这里的动画基于CSS Houdini @property
实现,首先定义一个自定义属性--angle
,接受角度值,初始值为0度。
设置关键帧动画,修改定义的--angle
属性从0度旋转到360度。
给每个文字的增加animation
动画关联定义的关键帧动画spiral
。
重点代码transform
变换,使用transform
属性结合calc
函数和三角函数来实现Y轴的正弦波形偏移和缩放效果。
同时在动画中应用了前面定义的spiral
动画。结合这两个函数,transform
属性效果如下:
- Y 轴位移: 元素根据
--angle
的值在 Y 轴上上下移动,形成波动效果。 - 缩放效果: 元素的大小根据
--angle
的值进行动态缩放,形成从小到大或从大到小的变化。
此时的动画效果:
螺旋滚动
此时我们的文字已经滚动起来了,只需要最后一步关键的代码就可以实现螺旋滚动效果,仔细看原始效果就能发现其实每个文字滚动的动画轨迹都是一样的,唯一的区别就是执行的动画延迟时间不同,形成了一个波动起伏的效果。
增加延迟动画CSS,由于我们的文字是通过JS创建的,所以需要在 createElement
中增加以下代码即可,根据动画持续时间和当前文字索引计算延迟时间:
由于 --angle
设置了关键帧动画,是一个动态变化的变量,这段代码会使得元素在页面上呈现出螺旋或波动的动画效果,增强视觉吸引力。
此时我们的动画效果基本就完成了,如下所示:
兼容火狐
由于Firefox不支持@property
动画,原作者写了火狐兼容代码,使用JavaScript来实现动画效果。
定义一个animation
动画函数,使用 requestAnimationFrame
方法实现平滑的动画效果。
在动画函数中遍历所有文字元素来设置动画。
计算Y轴偏移和缩放,使用三角函数计算每个元素的Y轴偏移量和缩放比例:
设置动画延迟,根据元素索引和数据属性data-offset计算动画的延迟时间。
最后动态设置CSS变换属性transform
来应用Y轴偏移和缩放。在定时器中使用delay延迟时间执行动画。
火狐浏览器执行动画函数。
在线预览
关注公众号回复【 20240730 】可获取完整源代码~
最后
通过结合 JavaScript 和 CSS,我们成功实现了一个动态的螺旋文字滚动特效。该特效不仅展示了字符的动态变化,还通过延迟时间结合动画效果增强了视觉吸引力。本质实现这个效果是不需要 JavaScript,为了兼容火狐和动态创建文案DOM才使用了相关 JavaScript。有兴趣的可以尝试使用纯CSS实现这个炫酷的螺旋文字滚动特效。
看完本文如果觉得有用,记得点个赞支持,收藏起来说不定哪天就用上啦~
专注前端开发,分享前端相关技术干货,公众号:南城大前端(ID: nanchengfe)