之前在逛知乎的時候，發現知乎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的話，那么視覺效果就會越來越遠，圖片的移動就會越來越不明顯。 這樣就可以模擬不同的需求。