知乎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.4k
5 个回答

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

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

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

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

对于你这个问题,只能说抱歉,既然你已经知道方向了,就应该想方法去实现它然后再考虑优化。知乎的方法我也不知道,但我想说的是,每个人的思维都不一样,为什么还要知道它的方法,知道它的表现形式不就够了么?

撰写回答

登录后参与交流、获取后续更新提醒

宣传栏