之前在逛知乎的时候,发现知乎app首页中偶尔掺杂的广告图片,都是做的视觉差的效果,广告图片的向上速度明显比外面页面的上拉速度慢了很多,看起来很炫酷,然后在网上看了下,发现有很多js插件可以实现这种效果。这种就不提了,这次我们是考虑的用css写。(当然,ie是不兼容的)

  这边参考了张鑫旭大神的一篇文章。  视觉差-张鑫旭

  这边是我参考之后做的demo:   demo

  主要的代码就是

    外层容器: perspective: 1px;     定义3d元素离视图的距离

    中间元素: transform-style: preserve-3d;    定义3d空间。

    需要视觉差的元素:  transform: translateZ(-1px ) scale(2)

  这里面大体的原理就是:  因为定义了视图距离为1px,那么translateZ -1px的话,我们肉眼看这个图片就只有之前的一半大小,这个时候scale(2)的话,就放大了2倍,视觉上就和原来的一样大小,但是滚动的时候,位移的变化还是1:2,这样就形成了视觉差。

  如果更改translateZ的话,那么视觉效果就会越来越远,图片的移动就会越来越不明显。 这样就可以模拟不同的需求。

05-11 22:26