視差滾動（parallax scrolling）指網頁滾動過程中，多層次的元素進行不同程度的移動，視覺上形成立體運動效果的網頁展示技術。
先看我寫的乙個簡單效果：
咱先建立乙個vue專案，寫乙個簡單頁面，目錄結構如下：
我們先刪除home.vue中的布局**，重新寫乙個簡單介面：
aaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbb
aaaaaaaaaaaaaaaaaaaa
background-attachment: fixed;因為我的div設定了background-attachment: fixed;屬性，所以div的背景是固定的。但有的同學就說，這不是我要的效果呀，我要的效果是，隨著內容的滾動，背景會跟著有小幅的滾動。別急，接下來再看乙個css的屬性：
background-position設定背景的起始位置能幹嘛？大家想一下現在我們的是固定的，沒有滾動，但是如果我麼設定了背景y軸或者x軸的起始位置隨著滑鼠滾動而產生的不同的偏差，是不是也和背景滾動有一樣的效果了，只要我們把背景滾動的速率控制的慢一點，就能實現文章開頭的效果。好，有了思路，開始寫**，更改home.vue中的**，新增隨著滑鼠滾動改變背景位置的邏輯：
aaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbb
aaaaaaaaaaaaaaaaaaaa
這下背景隨著滑鼠滾動就會有小幅度滾動了。至於細節方面可以調整ratio的值和y1的計算方式來優化細節。ratio的值控制背景滾動速率，y1值控制背景起始位置。
視差滾動效果
確實，早期大部分視差滾動效果基本上就是如此，滾動事件是前提，然後要麼是直接改變位置，要麼如果是使用了背景，則改變背景的background position，不過實際上這種方法是存在缺陷的。監聽滾動事件，要想做到盡可能地流暢渲染效果，就不可以讓滾動事件 節流防抖動 throttle debounce...
頁面滾動視差效果的實現
今天在發現乙個視差滾動的例子，想自己實現一下視差效果。開啟例子 首先呢，我們可以選擇監聽scroll和mousewheel事件，說說各自的優缺點。scroll 優點 當頁面滾動到邊界時，不會觸發事件。缺點 需要自己判斷滑鼠滾動方向。mousewheel 優點 可以直接知道滾動方向。缺點 當到達頁面邊...
背景移動視差效果
我們在遊戲中有時會遇到 兩層背景的情況，要離我們遠的背景移動比較慢，近的比較快，如果不想自己寫寫兩層背景，我們可以利用引擎自帶的視差節點來做 auto sprite3 sprite create helloworld.png sprite3 setanchorpoint point 0,0 auto...