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

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

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

clipboard.png

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

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

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

更新

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

圖1
clipboard.png

圖2
clipboard.png

圖3
clipboard.png

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

回答
編輯回答
冷溫柔

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

寫了一個demo，滾動一下看看是不是這個效果

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

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

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

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

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

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

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

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

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

2018年3月24日 07:28