javascript - 請教一個關於頁面視差效果的實現

Question

頁面效果：

驚蟄

關於這個效果的模仿：

我起初是在知乎獲知了一個叫skrollr.js 的庫，並且學習並應用到自己的頁面，由於我的頁面不像上面的是靜態節點，文章和圖片都是請求得到，並且是逐步請求依賴img 的onload 事件來渲染一套（文章+背景圖）的模板，並append 到頁面中。剛開始的實作是把背景圖全部用 fixed 定位層疊到螢幕，利用 skrollr 的根據參照物做出 css 屬性狀態變化來達到效果。但實際上就算不寫效果，只要一個 skrollr.js 的初始化函數，在安卓機上就卡得不行。 skrollr.js 作者也有指出，如下圖：

#後來又仔細觀察了下樓上驚蟄頁面的效果，發現：

1. 容器內的每個父區塊都是 absolute 定位，而且都是 left:0 top: 0 right: 0 bottom: 0

2. #容器採用了類似kinetic庫利用 touch 事件使用 translate 模擬滾動。 。 。 效果 demo: demo

疑問：

1. 他是如何達到視差效果，雖然看到有 z-index 屬性

2. 他的 translate 基本上是移除一螢幕的高度，然後後面的頁面就上來了。 。 。 這種如何做到了，求具體解釋

Answer 1

全部絕對定位，右邊的捲軸是模擬的。在同樣的z-index高度下，後面的元素會自動的覆蓋前面的元素。

所以只要把根據滾動狀態來把後面的translate改變就行了，你可以理解成一個卡片覆蓋另一個卡片。

簡單來說，最開始滾動時把第二屏的元素往上移動，知道超過一屏則開始第二屏，以此類推。

後面就是一些背景圖放大縮小之類的效果了。