參考旭哥的：
demo點這裡
class="box">
class="curtain">
class="comehere">div>
div>
*
.box
.curtain
.comehere
利用perspective、translatez，使得影象在視覺上縮放，然後通過scale將縮放至原來的大小，但是對於滾動條來說仍然是相對於scale之後的大小的滾動，和z軸上視覺的大小沒有關係。
2.但是這個方法有個問題，必須要讓緊貼的外層有滾動條，html或body的滾動條是沒有用。那麼如何計算box的最大高度呢？ 這裡要注意transfrom-origin的問題，不要看translatez之後的位置，要看只scale之後的位置，小心溢位被裁哦~
3.如何計算scale的具體值呢，要讓回到原來的大小。
借用下別人的圖：
簡單的數學，不難計算出 scale的值應該為1 + (translatez * -1) /perspective
css實現視差滾動
視差滾動 parallax scrolling 是指讓多層背景以不同的速度移動，形成立體的運動效果，帶來非常出色的視覺體驗。把背景的寬高鋪滿乙個瀏覽器可視區 width 100 height 瀏覽器可視高度將背景設定為相對於視口固定 background attachment fixed class...
視差滾動效果
確實，早期大部分視差滾動效果基本上就是如此，滾動事件是前提，然後要麼是直接改變位置，要麼如果是使用了背景，則改變背景的background position，不過實際上這種方法是存在缺陷的。監聽滾動事件，要想做到盡可能地流暢渲染效果，就不可以讓滾動事件 節流防抖動 throttle debounce...
滾動視差 01
先看一下示例展示第四屏的效果 思路 視差滾動到相應的容器時，讓背景固定不動，等滑到某個高度時恢復正常滾動，這裡是用兩張相同的做交替覆蓋，由於相同，因此看不出變化，從而達到一定的滾動視差效果，當然滾動視差效果有很多態別，這只是其中的一種方式，而且還沒有達到像示例展示那裡的效果，還需要對背景進行一定的優...