像 vultr.com 首页下滑出现的动画有什么开源框架/工具可以快速制作吗?还是必须手搓 CSS 来写?

2022-03-18 21:25:22 +08:00
 rv54ntjwfm3ug8
发现一些个人开发者的很普通的软件官网也有这些很炫的动画,感觉不太像他们自己写的。搜了下 HTML 动画框架好像不是用来做这事的。一般这种是怎么做的,难道用了什么落地页生成器之类的东西?
2252 次点击
所在节点    程序员
7 条回复
hunk
2022-03-18 21:34:16 +08:00
类似 react-motion ,了解一下
ZE3kr
2022-03-18 21:37:35 +08:00
纯 css 就行了
rannnn
2022-03-18 21:45:29 +08:00
用 after effect 画完导出用 lottie 渲染的 https://airbnb.design/lottie/
这里也有很多免费的动画可以用 https://lottiefiles.com/featured
leadfast
2022-03-18 23:39:36 +08:00
DrakeXiang
2022-03-18 23:51:02 +08:00
https://michalsnik.github.io/aos/ 比如这个,自己写其实也就是需要检测滚动,有个 api 可以检测元素在视窗中的位置,到位置之后就触发动画
Felldeadbird
2022-03-19 00:05:03 +08:00
css 动画结合 JS IntersectionObserver 滚动监测。 就是先定义一个动画 class 。当内容滚动到显示时,在元素添加动画的 class 就可以执行了。
shengchao
2022-03-19 00:05:35 +08:00
我用 vue 写的时候,自己写一个自定义指令,监测 dom 出现在窗口和离开窗口时候的的 dom.classlist.add 和 dom.classlist.remove 。供参考

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

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

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

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

© 2021 V2EX