HTML/CSS 苹果官网的产品展示 html 部分是怎么做出来的?

assyer · 2013年12月24日 · 最后由 assyer 回复于 2013年12月27日 · 5596 次阅读

很好奇那个 3D 效果到底是多张图片连续加载,还是用 html5 画出来的。。。 http://www.apple.com/ipad-air/

哪啊?你截个图或给个链接看看。视差效果么?

#1 楼 @chairy11 http://www.apple.com/ipad-air/ 就是这个效果,滚动鼠标,然后就会有很炫的 3D 效果,我记得最开始是用在 MacPro 烟灰缸的产品展示上的

。。。全 MP4……

#4 楼 @nightire 我了个去,这个居然有 16MB!!好烧流量的感觉。。。难怪每次加载那么慢 另外想请问一下你是怎么找到这个 mp4 文件的?我把这个 html 页面加载的所有 js 文件都打开了,然后挨个搜索.mp4也没能找到囧(刚刚找到方法了)下载下来一看,这个视频文件居然是 2880*1800 的分辨率,好夸张的感觉,之前烟灰缸的尺寸也才 800*800

#4 楼 @nightire oops,我貌似找到了,通过搜索那个 html 页面的medie关键字找到一段设置资源路径的代码,然后再搜索overview.js就能找到对应的 js 文件,然后再匹配 mp4 关键字就能找到了~~

#6 楼 @assyer 。。。看网络。。。

充分说明了做出来才是王道,不管是用什么方法做出来的。。

#9 楼 @xdada oops,难道它还认浏览器?话说回来,对于像这种动态效果,是不是用替换图片 src 的方式可能比用 mp4 更划算一些,mp4 太大了,图片反而好压缩一点?

需要 登录 后方可回复, 如果你还没有账号请 注册新账号