css实现视觉差的滚动

　　之前在逛知乎的时候，发现知乎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的话，那么视觉效果就会越来越远，图片的移动就会越来越不明显。 这样就可以模拟不同的需求。

转载于:https://www.cnblogs.com/wjyz/p/10231879.html