国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

javascript - 請教一個關(guān)于頁面視差效果的實現(xiàn)
PHP中文網(wǎng)
PHP中文網(wǎng) 2017-05-16 13:26:03
0
1
1144

頁面效果:

驚蟄

關(guān)于這個效果的模仿:

我起初是在知乎獲知了一個叫 skrollr.js 的庫,并且學(xué)習(xí)并應(yīng)用到自己的頁面,由于我的頁面不像上面的是靜態(tài)節(jié)點,文章和圖片都是請求得到,并且是分步請求依賴于 img 的 onload 事件來渲染一套(文章+背景圖)的模板,并 append 到頁面中。剛開始的實現(xiàn)是把背景圖全部用 fixed 定位層疊到屏幕,利用 skrollr 的根據(jù)參照物做出 css 屬性狀態(tài)變化來達到效果。但實際上哪怕不寫效果,只要一個 skrollr.js 的初始化函數(shù),在安卓機上就卡得不行。 skrollr.js 作者也有指出,如下圖:

后來又仔細觀察了下樓上驚蟄頁面的效果,發(fā)現(xiàn):

  1. 容器內(nèi)的每個父塊都是 absolute 定位,并且都是 left:0 top: 0 right: 0 bottom: 0

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

疑問:

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

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

PHP中文網(wǎng)
PHP中文網(wǎng)

認證高級PHP講師

全部回復(fù)(1)
左手右手慢動作

全部絕對定位,右邊的滾動條是模擬的。在同樣的z-index高度下,后面的元素會自動的覆蓋前面的元素。

所以只要把根據(jù)滾動狀態(tài)來把后面的translate改變就行了,你可以理解成一個卡片覆蓋另一個卡片。

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

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

最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板