在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ 知乎app這種廣告效果如何用web實(shí)現(xiàn)

知乎app這種廣告效果如何用web實(shí)現(xiàn)

先認(rèn)錯(cuò)，知乎首頁是native，市場才是嵌的web，故本問主要討論如何用web復(fù)現(xiàn)該功能。

clipboard.png

如圖紫色區(qū)域?yàn)閺V告圖，紅色區(qū)域是窗口（天窗），通過滾動(dòng)能看到完整的廣告圖片。
自己想到了2種實(shí)現(xiàn)方式

  1. 天窗透明，圖片下置為背景.這種偏向css
  2. 天窗就是圖片，通過滾動(dòng)調(diào)整image-position.這種偏向js

感覺這種用戶體驗(yàn)很不錯(cuò)
想知道知乎的前端同僚如何實(shí)現(xiàn)它的

更新

通過安卓開發(fā)者模式能看到以下

圖1
clipboard.png

圖2
clipboard.png

圖3
clipboard.png

3圖能看到最后“天窗”滾動(dòng)到頂部時(shí)，是連帶圖片滾動(dòng)的，故復(fù)現(xiàn)的話會(huì)偏向第二種方案。

回答
編輯回答
冷溫柔

不太清楚知乎的實(shí)現(xiàn)，但對于前端來說，可以了解下 background-attachment 這個(gè)css屬性。

寫了一個(gè)demo，滾動(dòng)一下看看是不是這個(gè)效果

https://jsfiddle.net/Lvjfohsx/3/

2017年11月8日 07:11
編輯回答
乞許

烏鴉說的不對。并不是 background-attachment 這個(gè)css屬性。我是是昨天看到這個(gè)問題，也是有這個(gè)需求，然后今天專門注冊一個(gè)賬號回答這個(gè)問題的！我在知乎也已經(jīng)回答過這個(gè)問題，只是用那個(gè)屬性，你仔細(xì)看，根本沒有達(dá)到想要的效果！https://github.com/bozaiOvO/-... 這個(gè)是我寫的一個(gè)視差demo，也挺簡單那，但是我看好多人都以為是background-attachment，其實(shí)仔細(xì)看看，明顯不是欸！親們！我不知道我的那個(gè)demo可否滿足你的需求，如果不滿足，我希望你們可以提出來一起改進(jìn)，如果滿足，那是最好不過了。

2017年5月10日 01:12
編輯回答
耍太極

偏js，類似阿里云首頁最下面的一個(gè)背景條https://www.aliyun.com/
好處在于可做出入視窗優(yōu)化，另外可以記錄當(dāng)前圖層的位置，以便點(diǎn)擊展開和關(guān)閉還原操作。

2017年1月22日 01:04
編輯回答
扯不斷

其他先不說，你拿一個(gè)native的截圖問用web的方式怎么實(shí)現(xiàn)？

2018年5月30日 04:45
編輯回答
咕嚕嚕

對于你這個(gè)問題，只能說抱歉，既然你已經(jīng)知道方向了，就應(yīng)該想方法去實(shí)現(xiàn)它然后再考慮優(yōu)化。知乎的方法我也不知道，但我想說的是，每個(gè)人的思維都不一樣，為什么還要知道它的方法，知道它的表現(xiàn)形式不就夠了么？

2018年3月24日 07:28