第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

請(qǐng)教一個(gè)關(guān)于頁(yè)面視差效果的實(shí)現(xiàn)

請(qǐng)教一個(gè)關(guān)于頁(yè)面視差效果的實(shí)現(xiàn)

溫溫醬 2018-11-14 14:13:50
頁(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)了。。。 這種如何做到了,求具體解釋
查看完整描述

1 回答

?
慕沐林林

TA貢獻(xiàn)2016條經(jīng)驗(yàn) 獲得超9個(gè)贊

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

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

簡(jiǎn)單來(lái)說(shuō),最開(kāi)始滾動(dòng)時(shí)把第二屏的元素往上移動(dòng),知道超過(guò)一屏則開(kāi)始第二屏,以此類推。

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


查看完整回答
反對(duì) 回復(fù) 2018-12-10
  • 1 回答
  • 0 關(guān)注
  • 492 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)