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

2019-11-17 02:32:48 +08:00
 ttentau1

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

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

6089 次点击
所在节点    Apple
13 条回复
luckyrayyy
2019-11-17 03:22:36 +08:00
目测是很暴力的方法，加载了巨量的图片。AirPods Pro 的那个我记得十好几 MB
rabbbit
2019-11-17 03:27:48 +08:00
用 sticky 粘到中间,监听 onScroll 事件, 根据滚动距离更换图片
rabbbit
2019-11-17 03:35:13 +08:00
奇怪的是有个 data-component-list="ThreeJSLoaderComponent"
搞不懂用 three.js 做了什么,拿 three.js 画了个矩形然后换贴图?
Hsinyao
2019-11-17 09:51:31 +08:00
有一说一苹果的前端属实牛逼
varzy
2019-11-17 11:03:12 +08:00
看了一下，开合盖子的动画是个 video 标签。那应该是监听鼠标滚动事件，控制视频进度
wclebb
2019-11-17 12:15:54 +08:00
有些我查看网页是视频控制的。
ttentau1
2019-11-17 12:57:13 +08:00
@wclebb 对的，哈哈我也发现好像是，有 video 标签
ttentau1
2019-11-17 12:57:42 +08:00
@Hsinyao 巨屌好吧
ttentau1
2019-11-17 12:58:05 +08:00
@varzy 应该是，发现 video 标签了
Building
2019-11-17 14:13:33 +08:00
网页特效其实不算特别，设计功力是真的厉害，苹果广告公司名不虚传。
PainAndLove
2019-11-17 14:18:12 +08:00
主要还是设计师牛 b
zhnagyang
2019-11-17 21:35:46 +08:00
有一种风格叫苹果风格，不佩服不行
icenine
2019-11-18 18:04:23 +08:00
好多效果就是视频
早年宽带还不是这么宽时苹果就这么干了
苹果前端为了效果一直这么丧心病狂

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

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

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

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

© 2021 V2EX