今天在發現乙個視差滾動的例子，想自己實現一下視差效果。
開啟例子
首先呢，我們可以選擇監聽scroll和mousewheel事件，說說各自的優缺點。
scroll這裡我選擇了熟悉的scroll事件，判斷滾輪方向很簡單，只需要記錄最後一次優點：當頁面滾動到邊界時，不會觸發事件。
缺點：需要自己判斷滑鼠滾動方向。
mousewheel
優點：可以直接知道滾動方向。
缺點：當到達頁面邊界，頁面已經不能在滾動下去的時候，還是會觸發事件，需要做判斷，而且相容性上，chrome和火狐是有些區別的，chrome下是
mousewheel，而firefox是dommousescroll。
document.body.scrolltop的位置，下次觸發事件的時候相減，負數則是up，正數就是down。
img
.scroll
class="container">
header
header>
class="main">
txtsection>
class="main">
class="scroll"
src="" />
section>
class="main">
txtsection>
class="main">
class="scroll"
src="" />
section>
div>
imgs.each(function
(index, val) );
}})我們先獲得乙個需要執行視差效果的imglist，每次觸發scroll事件時，，我們要從中篩選出需要執行的img。
的初始top設定成50%，即居中顯示，這樣上下移動不容易超出邊界。
see the pen zqqwyp by chenchen (@larry011) on codepen.
js滾輪事件(mousewheel/dommousescroll)了解
視差滾動效果
確實，早期大部分視差滾動效果基本上就是如此，滾動事件是前提，然後要麼是直接改變位置，要麼如果是使用了背景，則改變背景的background position，不過實際上這種方法是存在缺陷的。監聽滾動事件，要想做到盡可能地流暢渲染效果，就不可以讓滾動事件 節流防抖動 throttle debounce...
VUE實現背景視差滾動效果
視差滾動 parallax scrolling 指網頁滾動過程中，多層次的元素進行不同程度的移動，視覺上形成立體運動效果的網頁展示技術。先看我寫的乙個簡單效果 咱先建立乙個vue專案，寫乙個簡單頁面，目錄結構如下 我們先刪除home.vue中的布局 重新寫乙個簡單介面 aaaaaaaaaaaaaaa...
stellar製作視差滾動效果
html 單個元素選項中data stellar background ratio比較常用。接受乙個正整數的值，可以改變它被應用到元素的影響速度。例如，data stellar background ratio 0.5 意味著改變速度為自然滾動速度的一半。如果想使這個屬性值低於1，建議在樣式表裡設定...