視差滾動（parallax scrolling）是指讓多層背景以不同的速度移動，形成立體的運動效果，帶來非常出色的視覺體驗。
把背景的寬高鋪滿乙個瀏覽器可視區：
width = 100%; height = 瀏覽器可視高度將背景設定為相對於視口固定：
background-attachment: fixed;
class
="one"
>
div>
class
="two"
>
div>
class
="three"
>
div>
*div.two
.three
//js版本 將每個div的高度設定為瀏覽器可視視窗的高度
let divs = document.
queryselectorall
('div');
for(
let i =
0; i < divs.length; i++
)//jquery版本 將每個div的高度設定為瀏覽器可視視窗的高度$(
function()
)
純CSS視差滾動
參考旭哥的 demo點這裡 class box class curtain class comehere div div box curtain comehere 1.原理就是 利用perspective translatez，使得影象在視覺上縮放，然後通過scale將縮放至原來的大小，但是對於滾動...
視差滾動效果
確實，早期大部分視差滾動效果基本上就是如此，滾動事件是前提，然後要麼是直接改變位置，要麼如果是使用了背景，則改變背景的background position，不過實際上這種方法是存在缺陷的。監聽滾動事件，要想做到盡可能地流暢渲染效果，就不可以讓滾動事件 節流防抖動 throttle debounce...
滾動視差 01
先看一下示例展示第四屏的效果 思路 視差滾動到相應的容器時，讓背景固定不動，等滑到某個高度時恢復正常滾動，這裡是用兩張相同的做交替覆蓋，由於相同，因此看不出變化，從而達到一定的滾動視差效果，當然滾動視差效果有很多態別，這只是其中的一種方式，而且還沒有達到像示例展示那裡的效果，還需要對背景進行一定的優...