macOS Sierra 官網的視覺差動畫是如何實現的？

01-14

macOS Sierra 的官網 macOS 頁面有一段動畫（如果打開是靜態圖像，可以嘗試刷新以載入動畫）。仔細觀察可以發現：隨著頁面的拉動，每座山峰之間，以及同一座山峰上的不同地點間，會因視角的變化而產生位移等視覺差的效果。
macOS Sierra 官網動畫—在線播放—優酷網，視頻高清在線觀看視頻
使用瀏覽器的開發者工具找到一些可能用於動畫渲染的原材料：

那麼，這樣的動畫是否通過 CSS 實現？它又是如何實現的？

看渲染出來的節點，是用 canvas 畫出來的。

但用 HTML 分幾個層，監聽 scroll 事件，根據滾動位置控制 CSS 縮放和位置也能搞。寫了個 Demo： https://hk1229.cn/demo/sierra-parallax/

用視頻也可以做，但如果要保留大量細節的話，可能視頻體積比較大；同樣地 js 監聽滾動來控制視頻正向、反向播放，但涉及到視頻緩衝等問題，如果要精確控制的話，有挺多坑的，這點可以請 @yibuyisheng 來細說下。

Ps. 你給出的素材中後兩張就是山峰素材和它的蒙版，這麼搞是為了減少圖片體積。實測了下，此處 jpg+蒙版的方式實現半透明山峰所產生的圖片大小僅為純png方式的 20%，確實優化得很好。

電影裡面的大場景，也是手繪圖層拼接的，原理就是來自這裡，可以參考和借鑒一些後期製作里發出來的視頻或者教程，理解了原理，再用js弄個tween互動下，可以控制縱深前後推拉的視覺了。