像 vultr.com 首页下滑出现的动画有什么开源框架/工具可以快速制作吗？还是必须手搓 CSS 来写？
rv54ntjwfm3ug8 · 2022-03-18 21:25:22 +08:00 · 2250 次点击这是一个创建于 1006 天前的主题，其中的信息可能已经有所发展或是发生改变。
发现一些个人开发者的很普通的软件官网也有这些很炫的动画，感觉不太像他们自己写的。搜了下 HTML 动画框架好像不是用来做这事的。一般这种是怎么做的，难道用了什么落地页生成器之类的东西？
 |
1
hunk 2022-03-18 21:34:16 +08:00
类似 react-motion ，了解一下
|
 |
2
ZE3kr 2022-03-18 21:37:35 +08:00
纯 css 就行了
|
 |
3
rannnn 2022-03-18 21:45:29 +08:00  2
用 after effect 画完导出用 lottie 渲染的 https://airbnb.design/lottie/
这里也有很多免费的动画可以用 https://lottiefiles.com/featured |
 |
4
leadfast 2022-03-18 23:39:36 +08:00
|
 |
5
DrakeXiang 2022-03-18 23:51:02 +08:00 1
https://michalsnik.github.io/aos/ 比如这个，自己写其实也就是需要检测滚动，有个 api 可以检测元素在视窗中的位置，到位置之后就触发动画
|
 |
6
Felldeadbird 2022-03-19 00:05:03 +08:00
css 动画结合 JS IntersectionObserver 滚动监测。 就是先定义一个动画 class 。当内容滚动到显示时，在元素添加动画的 class 就可以执行了。
|
 |
7
shengchao 2022-03-19 00:05:35 +08:00
我用 vue 写的时候，自己写一个自定义指令，监测 dom 出现在窗口和离开窗口时候的的 dom.classlist.add 和 dom.classlist.remove 。供参考
|
Select Language