蘋果網站 iPad Air 介紹頁，隨著網頁滾動設備翻滾和畫面變化的效果具體怎麼實現，是視頻嗎？

12-03

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
原頁面中的視頻均無法載入了，然後全部替換為圖片了。尚不清楚是網路問題，還是蘋果自己刪除了視頻。

謝邀

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動畫。視頻結合著視察滾動來呈現