頁(yè)面效果:驚蟄關(guān)于這個(gè)效果的模仿:我起初是在知乎獲知了一個(gè)叫 skrollr.js 的庫(kù),并且學(xué)習(xí)并應(yīng)用到自己的頁(yè)面,由于我的頁(yè)面不像上面的是靜態(tài)節(jié)點(diǎn),文章和圖片都是請(qǐng)求得到,并且是分步請(qǐng)求依賴于 img 的 onload 事件來(lái)渲染一套(文章+背景圖)的模板,并 append 到頁(yè)面中。剛開(kāi)始的實(shí)現(xiàn)是把背景圖全部用 fixed 定位層疊到屏幕,利用 skrollr 的根據(jù)參照物做出 css 屬性狀態(tài)變化來(lái)達(dá)到效果。但實(shí)際上哪怕不寫(xiě)效果,只要一個(gè) skrollr.js 的初始化函數(shù),在安卓機(jī)上就卡得不行。 skrollr.js 作者也有指出,如下圖:后來(lái)又仔細(xì)觀察了下樓上驚蟄頁(yè)面的效果,發(fā)現(xiàn):容器內(nèi)的每個(gè)父塊都是 absolute 定位,并且都是 left:0 top: 0 right: 0 bottom: 0容器采用了類似kinetic庫(kù)利用 touch 事件使用 translate 模擬滾動(dòng)。。。 效果 demo: demo疑問(wèn):他是如何達(dá)到視差效果,雖然看到有 z-index 屬性他的 translate 基本上是移除一屏的高度,然后后面的頁(yè)面就上來(lái)了。。。 這種如何做到了,求具體解釋
請(qǐng)教一個(gè)關(guān)于頁(yè)面視差效果的實(shí)現(xiàn)
溫溫醬
2018-11-14 14:13:50