苹果网站 iPad Air 介绍页，随着网页滚动设备翻滚和画面变化的效果具体怎么实现，是视频吗？
程序员文章站
2022-05-24 14:49:26
...
via Apple - iPad Air
具体的实现方式：
1.将页面内容分为若干个单页，每个单页都使用整个可视区域显示；
2.通过监听 鼠标滚动/右侧导航列表的点击 事件触发页面切换；
3.切换子页面时，有两个入口：正向/逆向。用来控制页面中动画的播放方向。
页面中的动画的确是使用了视频（源文件：http://images.apple.com/media/us/ipad-air/2013/0be12b9f-265c-474c-a0cc-d3c4c304c031/overview/desktop/story/story.mp4），不过也可以使用 CSS3/Canvas/WebGL 方式，但开发和兼容都比较麻烦，用视频很方便，不过会有文件过大（原视频 16.1M）和分辨率无法自适应的问题。
附送 Lao3D 上的 iPad 模型，WebGL 实现：捞3D —— iPad
append @2013-10-26 23:07:50
原页面中的视频均无法加载了，然后全部替换为图片了。尚不清楚是网络问题，还是苹果自己删除了视频。 谢邀
苹果把各个展示页面分成 n 层叠在一起，每层都占满整个屏幕，同时最上面有个层用来播放视频。
页面滚动时，通过改变不同层的 z-index，旧的一层沉下去，新的一层浮上来，同时通过 javascript 控制视频的播放方向和进度（HTML5 提供了一组API 用来操作视频）。
当然用别的技术也可以实现。除了 Canvas, CSS3, WebGL 什么的，苹果以前在官网还用过一个丧心病狂技术，使用照片序列做水平方向上的 3D 展示，记得用了 70 多张各角度的照片，不过现在找不到那个链接了。 第一次被人邀请啊，哈哈。
刚才看了一下，的确是视频，使用Chrome开发者工具可以看到有一段mp4的请求。
具体原理上面的learnshare已经解释的很清楚了，我也就不多说了。
不过learnshare说到的分辨率无法自适应的问题，苹果是采用类似“响应式”的方案，其实也就是放了几个不同分辨率的视频，事先判断是desktop还是tablet等来决定加载哪个视频。比如对于desktop使用的视频就是分辨率为2880*1800、大小为16M的，而对于iPad使用的就是分辨率为1342*1064、大小为10.3M的。
实际上苹果也是对这个视频做了分割的，比如这段（http://images.apple.com/media/cn/ipad-air/2013/0be12b9f-265c-474c-a0cc-d3c4c304c031/overview/desktop/intro/intro.mp4 ），但是用桌面浏览器浏览的时候直接请求了完整的视频，没仔细看代码，可能分割的视频是用来在移动设备分段加载节省流量的吧。
另外……苹果做了浏览器的检测，Safari/Chrome/Firefo访问是视频，而IE访问的时候……只有图片你懂的……
啰嗦了这么多，请见谅= =|| 谢邀。看了是mp4。 感谢邀请。这是视频。 并不是完全的css或js动画。 视频结合着视察滚动来呈现
回复内容：
页面使用了比较常见的单页呈现方式。具体的实现方式：
1.将页面内容分为若干个单页，每个单页都使用整个可视区域显示；
2.通过监听 鼠标滚动/右侧导航列表的点击 事件触发页面切换；
3.切换子页面时，有两个入口：正向/逆向。用来控制页面中动画的播放方向。
页面中的动画的确是使用了视频（源文件：http://images.apple.com/media/us/ipad-air/2013/0be12b9f-265c-474c-a0cc-d3c4c304c031/overview/desktop/story/story.mp4），不过也可以使用 CSS3/Canvas/WebGL 方式，但开发和兼容都比较麻烦，用视频很方便，不过会有文件过大（原视频 16.1M）和分辨率无法自适应的问题。
附送 Lao3D 上的 iPad 模型，WebGL 实现：捞3D —— iPad
append @2013-10-26 23:07:50
原页面中的视频均无法加载了，然后全部替换为图片了。尚不清楚是网络问题，还是苹果自己删除了视频。 谢邀
learnshare 说的大体上是对的，就是视频，不过视频只有一段，而且 URL 也是固定的。
苹果把各个展示页面分成 n 层叠在一起，每层都占满整个屏幕，同时最上面有个层用来播放视频。
页面滚动时，通过改变不同层的 z-index，旧的一层沉下去，新的一层浮上来，同时通过 javascript 控制视频的播放方向和进度（HTML5 提供了一组API 用来操作视频）。
当然用别的技术也可以实现。除了 Canvas, CSS3, WebGL 什么的，苹果以前在官网还用过一个丧心病狂技术，使用照片序列做水平方向上的 3D 展示，记得用了 70 多张各角度的照片，不过现在找不到那个链接了。 第一次被人邀请啊，哈哈。
刚才看了一下，的确是视频，使用Chrome开发者工具可以看到有一段mp4的请求。
具体原理上面的learnshare已经解释的很清楚了，我也就不多说了。
不过learnshare说到的分辨率无法自适应的问题，苹果是采用类似“响应式”的方案，其实也就是放了几个不同分辨率的视频，事先判断是desktop还是tablet等来决定加载哪个视频。比如对于desktop使用的视频就是分辨率为2880*1800、大小为16M的，而对于iPad使用的就是分辨率为1342*1064、大小为10.3M的。
实际上苹果也是对这个视频做了分割的，比如这段（http://images.apple.com/media/cn/ipad-air/2013/0be12b9f-265c-474c-a0cc-d3c4c304c031/overview/desktop/intro/intro.mp4 ），但是用桌面浏览器浏览的时候直接请求了完整的视频，没仔细看代码，可能分割的视频是用来在移动设备分段加载节省流量的吧。
另外……苹果做了浏览器的检测，Safari/Chrome/Firefo访问是视频，而IE访问的时候……只有图片你懂的……
啰嗦了这么多，请见谅= =|| 谢邀。看了是mp4。 感谢邀请。这是视频。 并不是完全的css或js动画。 视频结合着视察滚动来呈现