知乎app这种广告效果如何用web实现

游龙翔隼
  • 1.3k

先认错,知乎首页是native,市场才是嵌的web,故本问主要讨论如何用web复现该功能。


clipboard.png

如图紫色区域为广告图,红色区域是窗口(天窗),通过滚动能看到完整的广告图片。
自己想到了2种实现方式

  1. 天窗透明,图片下置为背景.这种偏向css
  2. 天窗就是图片,通过滚动调整image-position.这种偏向js

感觉这种用户体验很不错
想知道知乎的前端同僚如何实现它的


更新

通过安卓开发者模式能看到以下

图1
clipboard.png

图2
clipboard.png

图3
clipboard.png

3图能看到最后“天窗”滚动到顶部时,是连带图片滚动的,故复现的话会偏向第二种方案。

回复
阅读 2.8k
5 个回答

偏js,类似阿里云首页最下面的一个背景条https://www.aliyun.com/
好处在于可做出入视窗优化,另外可以记录当前图层的位置,以便点击展开和关闭还原操作。

其他先不说,你拿一个native的截图问用web的方式怎么实现?

苟活不如不活
  • 2
新手上路,请多包涵

乌鸦说的不对。并不是 background-attachment 这个css属性。我是是昨天看到这个问题,也是有这个需求,然后今天专门注册一个账号回答这个问题的!我在知乎也已经回答过这个问题,只是用那个属性,你仔细看,根本没有达到想要的效果!https://github.com/bozaiOvO/-... 这个是我写的一个视差demo,也挺简单那,但是我看好多人都以为是background-attachment,其实仔细看看,明显不是欸!亲们!我不知道我的那个demo可否满足你的需求,如果不满足,我希望你们可以提出来一起改进,如果满足,那是最好不过了。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏