哪位大佬这个网站 https://www.dragonfly.xyz/ 的的这个文本滚动效果是什么实现的?用的什么编码技术

40 天前
 yuang

Dragonfly

PORTFOLIO 这一节下面

778 次点击
所在节点    浏览器
5 条回复
aliyun2017
40 天前
aliyun2017
40 天前
@aliyun2017 看错题了
aliyun2017
40 天前
yohane3016
40 天前
整站 react 写的,不过这里的文字动效和用什么框架无关,打了下断点简单看了下实现思路:
把 ASCII 中的可显示字符集当做随机字符池子 chars ,然后根据你要显示的字符串划分进度,例如 10 个字符就每个字符 10%的进度,假设动画长度 1s ,则:
0-0.1s: 将所有字符替换成 chars 中的随机字符
0.1s-0.2s: 固定第一个字符,将剩余字符随机替换
0.2s-0.3s: 固定第一二个字符,将剩余字符随机替换
以此类推
直到动画结束显示你要显示的字符
yohane3016
40 天前
字符替换成随机字符这个操作要每帧执行或者你自己控制帧率

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1031639

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX