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

苹果官网的各种产品介绍页做的很炫欸!想请教下如何才能做出这样的效果?

  •  
  •   ttentau1 · 2019-11-17 02:32:48 +08:00 · 6142 次点击
    这是一个创建于 1867 天前的主题,其中的信息可能已经有所发展或是发生改变。

    苹果官网的各种产品介绍页做的很炫欸!!!想请教下如何才能做出这样的效果?他们是用了什么 3d 库吗?

    像这个页面: https://www.apple.com/cn/macbook-pro-16/ 开头那个 mac 电脑盖随着鼠标的滚动而上下移动,这种效果是怎么做到的呢?

    13 条回复    2019-11-18 18:04:23 +08:00
    luckyrayyy
        1
    luckyrayyy  
       2019-11-17 03:22:36 +08:00 via iPhone
    目测是很暴力的方法,加载了巨量的图片。AirPods Pro 的那个我记得十好几 MB
    rabbbit
        2
    rabbbit  
       2019-11-17 03:27:48 +08:00
    用 sticky 粘到中间,监听 onScroll 事件, 根据滚动距离更换图片
    rabbbit
        3
    rabbbit  
       2019-11-17 03:35:13 +08:00
    奇怪的是有个 data-component-list="ThreeJSLoaderComponent"
    搞不懂用 three.js 做了什么,拿 three.js 画了个矩形然后换贴图?
    Hsinyao
        4
    Hsinyao  
       2019-11-17 09:51:31 +08:00 via iPhone
    有一说一苹果的前端属实牛逼
    varzy
        5
    varzy  
       2019-11-17 11:03:12 +08:00 via iPhone
    看了一下,开合盖子的动画是个 video 标签。那应该是监听鼠标滚动事件,控制视频进度
    wclebb
        6
    wclebb  
       2019-11-17 12:15:54 +08:00 via iPhone
    有些我查看网页是视频控制的。
    ttentau1
        7
    ttentau1  
    OP
       2019-11-17 12:57:13 +08:00 via Android
    @wclebb 对的,哈哈我也发现好像是,有 video 标签
    ttentau1
        8
    ttentau1  
    OP
       2019-11-17 12:57:42 +08:00 via Android
    @Hsinyao 巨屌好吧
    ttentau1
        9
    ttentau1  
    OP
       2019-11-17 12:58:05 +08:00 via Android
    @varzy 应该是,发现 video 标签了
    Building
        10
    Building  
       2019-11-17 14:13:33 +08:00 via iPhone
    网页特效其实不算特别,设计功力是真的厉害,苹果广告公司名不虚传。
    PainAndLove
        11
    PainAndLove  
       2019-11-17 14:18:12 +08:00
    主要还是设计师牛 b
    zhnagyang
        12
    zhnagyang  
       2019-11-17 21:35:46 +08:00
    有一种风格叫苹果风格,不佩服不行
    icenine
        13
    icenine  
       2019-11-18 18:04:23 +08:00
    好多效果就是视频
    早年宽带还不是这么宽时苹果就这么干了
    苹果前端为了效果一直这么丧心病狂
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1029 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 20:22 · PVG 04:22 · LAX 12:22 · JFK 15:22
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.