V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
rv54ntjwfm3ug8
V2EX  ›  程序员

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

  •  
  •   rv54ntjwfm3ug8 · 2022-03-18 21:25:22 +08:00 · 2049 次点击
    这是一个创建于 741 天前的主题,其中的信息可能已经有所发展或是发生改变。
    发现一些个人开发者的很普通的软件官网也有这些很炫的动画,感觉不太像他们自己写的。搜了下 HTML 动画框架好像不是用来做这事的。一般这种是怎么做的,难道用了什么落地页生成器之类的东西?
    7 条回复    2022-03-19 00:05:35 +08:00
    hunk
        1
    hunk  
       2022-03-18 21:34:16 +08:00
    类似 react-motion ,了解一下
    ZE3kr
        2
    ZE3kr  
       2022-03-18 21:37:35 +08:00
    纯 css 就行了
    rannnn
        3
    rannnn  
       2022-03-18 21:45:29 +08:00   ❤️ 2
    用 after effect 画完导出用 lottie 渲染的 https://airbnb.design/lottie/
    这里也有很多免费的动画可以用 https://lottiefiles.com/featured
    DrakeXiang
        5
    DrakeXiang  
       2022-03-18 23:51:02 +08:00   ❤️ 1
    https://michalsnik.github.io/aos/ 比如这个,自己写其实也就是需要检测滚动,有个 api 可以检测元素在视窗中的位置,到位置之后就触发动画
    Felldeadbird
        6
    Felldeadbird  
       2022-03-19 00:05:03 +08:00
    css 动画结合 JS IntersectionObserver 滚动监测。 就是先定义一个动画 class 。当内容滚动到显示时,在元素添加动画的 class 就可以执行了。
    shengchao
        7
    shengchao  
       2022-03-19 00:05:35 +08:00
    我用 vue 写的时候,自己写一个自定义指令,监测 dom 出现在窗口和离开窗口时候的的 dom.classlist.add 和 dom.classlist.remove 。供参考
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3469 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 34ms · UTC 00:46 · PVG 08:46 · LAX 17:46 · JFK 20:46
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.