頁面效果:
驚蟄
關(guān)於這個(gè)效果的模仿:
我起初是在知乎獲知了一個(gè)叫skrollr.js 的庫,並且學(xué)習(xí)並應(yīng)用到自己的頁面,由於我的頁面不像上面的是靜態(tài)節(jié)點(diǎn),文章和圖片都是請(qǐng)求得到,並且是逐步請(qǐng)求依賴img 的onload 事件來渲染一套(文章+背景圖)的模板,並append 到頁面中。剛開始的實(shí)作是把背景圖全部用 fixed 定位層疊到螢?zāi)?,利?skrollr 的根據(jù)參照物做出 css 屬性狀態(tài)變化來達(dá)到效果。但實(shí)際上就算不寫效果,只要一個(gè) skrollr.js 的初始化函數(shù),在安卓機(jī)上就卡得不行。 skrollr.js 作者也有指出,如下圖:
#後來又仔細(xì)觀察了下樓上驚蟄頁面的效果,發(fā)現(xiàn):
容器內(nèi)的每個(gè)父區(qū)塊都是 absolute 定位,而且都是 left:0 top: 0 right: 0 bottom: 0
#容器採(cǎi)用了類似kinetic庫利用 touch 事件使用 translate 模擬滾動(dòng)。 。 。 效果 demo: demo
疑問:
他是如何達(dá)到視差效果,雖然看到有 z-index 屬性
他的 translate 基本上是移除一螢?zāi)坏母叨?,然後後面的頁面就上來了?。 。 這種如何做到了,求具體解釋
認(rèn)證高級(jí)PHP講師
全部絕對(duì)定位,右邊的捲軸是模擬的。在同樣的z-index高度下,後面的元素會(huì)自動(dòng)的覆蓋前面的元素。
所以只要把根據(jù)滾動(dòng)狀態(tài)來把後面的translate改變就行了,你可以理解成一個(gè)卡片覆蓋另一個(gè)卡片。
簡(jiǎn)單來說,最開始滾動(dòng)時(shí)把第二屏的元素往上移動(dòng),知道超過一屏則開始第二屏,以此類推。
後面就是一些背景圖放大縮小之類的效果了。