故事說起在一個冰冷幽暗的夜晚上，我正思考的十分重要的人生問題，這周末該去那里happy好呢？是宅在家里好呢，或者宅在家里好呢，還是宅在家里 好呢？這時，萬年隱身的QQ竟然浮起淺色聊天框，我去！不得了，居然是女神主動聯(lián)系我，女神一定是因為我俊朗的五官，185的模特身材而深深地迷戀上我 了，呵呵呵呵呵呵。
?
“誒，譚偉X，你在干嘛呢？”
“沒啊，在思考人生。” ? 難道這是要約我的節(jié)奏嗎？在妹子前必須保持冷靜。
“那個這周我要搞一個游戲宣傳的頁面，設(shè)計師說用【視差滾動】的效果，你能做個demo頁給我看看？”
?
。。。。。。。。。沒事！雖然跟我預(yù)想有點出入，但女神這是在考驗我！
?
【定義】
?
所謂的視差滾動，就是在頁面滾動過程中，多層次的元素進行不同程度的位移，帶來立體的視差效果。還有很多的奇思妙想的展現(xiàn)方式，都是滾動頁面觸發(fā)的，也可稱為視差滾動。視差滾動里面最基礎(chǔ)的就是切換背景，這點其實一個CSS就滿足了
?
【視差滾動原理一】
background-attachment: fixed || scroll || local
默認(rèn)是scroll，內(nèi)容跟著背景走，而視差滾動頁面里用fixed，背景相對頁面固定而不跟內(nèi)容滾動。
?
很快地我就做出了一個demo出來，還特意配上幾張優(yōu)雅的圖片和極富內(nèi)涵的詞句，女神一定會因為我的文采而愛上我的，而且，那些看似簡單的“我是內(nèi) 容”不斷重復(fù)，其實只要細(xì)心就會發(fā)現(xiàn)里面隱藏著我的表白，情商如此之高的女神，一定會發(fā)現(xiàn)，然后我們就可以幸福的在一起，在愛情的滋潤下，我很快就能升職 加薪，當(dāng)上總經(jīng)理，出任CEO，贏取白富美，走上人生巔峰。哈哈哈哈哈哈哈哈，誒？好像不用贏取白富美，那就挑戰(zhàn)白富美。
?
?
“咦，怎么是靜態(tài)的，譚偉X，能不能幫我做個會動的那種的視差滾動，麻煩了么么噠~”
?
。。。。。。居然完全沒有留意到我溢出的文采和隱藏的表白。。。。。沒事！雖然跟我預(yù)想有點出入，但女神這是在考驗我！
?
【視差滾動原理二】
女神想要些更加豐富的效果，也對，像我這么內(nèi)涵有檔次的程序員，當(dāng)然要來寫非常酷的動畫效果。
在原理的demo1的基礎(chǔ)上，我在scroll事件上添加一些動畫事件。
window.addEventListener('scroll',function(e){
var scrollTop = window.scrollY;
if(scrollTop > 0 && scrollTop < articleHeight){
title1.classList.add('title-anim');
content1.classList.add('content-anim');
}else if(scrollTop >= articleHeight && scrollTop < articleHeight*2){
title2.classList.add('title-anim');
content2.classList.add('content-anim');
}else if(scrollTop >= articleHeight*2 && scrollTop < articleHeight*3){
title3.classList.add('title-anim2');
content3.classList.add('content-anim');
}
})
?
視差滾動的表現(xiàn)方式非常多，滾動到頁面某個值后會觸發(fā)一個CSS3動畫，這也是眾多視差滾動中常見的一種。
?
?
(這個Demo使用了CSS3動畫，請使用現(xiàn)代瀏覽器查看)
?
【視差滾動原理三】
視差滾動中最突出的內(nèi)容就是立體的視差效果，最具有說明代表性的就是超級瑪麗的游戲場景
?
?
當(dāng)玩家操作馬里奧移動時，水管和墻塊更馬里奧在同一水平層，移動速度最快。天上的白云為中層背景圖，移動速度中等。而小山丘是最遠(yuǎn)的背景圖，移動速度最慢。三個層次內(nèi)容按不同速度移動，就會帶來一種立體的視差效果。
?
在dom結(jié)構(gòu)上，把同一層的dom元素都放到一個div里面，html結(jié)構(gòu)如下。
<div id="scene_back" class="scene">
<img id="pokemon1" src="./img/001.png">
<img id="pokemon4" src="./img/004.png">
<img id="pokemon7" src="./img/007.png">
</div>
<div id="scene_center" class="scene">
<img id="pokemon2" src="./img/002.png">
<img id="pokemon5" src="./img/005.png">
<img id="pokemon8" src="./img/008.png">
</div>
<div id="scene_front" class="scene">
<img id="pokemon3" src="./img/003.png">
<img id="pokemon6" src="./img/006.png">
<img id="pokemon9" src="./img/009.png">
</div>
?
在頁面滾動過程中，我們獲取頁面的scrollTop的值，根據(jù)不同參數(shù)值去設(shè)置各自scene的top值，這樣滾動頁面的時候，不同的速度就出來了
var sceneBack = document.getElementById('scene_back'),
sceneCenter = document.getElementById('scene_center'),
sceneFront = document.getElementById('scene_front');
var old_top1 = 0,
old_top2 = 200,
old_top3 = 700;
addEvent(window,'scroll',onScroll);
onScroll();
function onScroll(e){
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
sceneBack.style.top = old_top1+scrollTop*.9+'px';
sceneCenter.style.top = old_top2+scrollTop*.7+'px';
sceneFront.style.top = old_top3+scrollTop*.3+'px';
}
function addEvent(eventTarget, eventType, eventHandler) {
if (eventTarget.addEventListener) {
eventTarget.addEventListener(eventType, eventHandler, false);
} else {
if (eventTarget.attachEvent) {
eventType = "on" + eventType;
eventTarget.attachEvent(eventType, eventHandler);
} else {
eventTarget["on" + eventType] = eventHandler;
}
}
}
?
由于女神在等待的關(guān)系，代碼有點搓，也沒有做兼容性，但是原理就是這樣的。
?
?
這個Demo在非IE6/7下都能查看，只是,IE8的效果并不太好。Firefox效果最好。
?
這里還有個特殊情況：在Chrome下查看這個Demo請拖動滾動條，而不是滾動鼠標(biāo)。 原因是Chrome瀏覽器對鼠標(biāo)的滾動做了優(yōu)化處理，滾動一個齒輪幅度，其他瀏覽器是觸發(fā)十幾次scroll事件，而Chrome只會觸發(fā)一次。只有一幀的動畫，大家想想就知道。這里可以考慮加入緩動動畫，本Demo是基于原理說明和 泡女神 ，具體可以留意下一篇博客優(yōu)化篇
?
兩個demo完事后，很快地就交到女神手上，這次我在demo特意多加上幾句（真的是幾句？）表白，女神這次一定能發(fā)現(xiàn)的。而且，pokemon都 出來幫忙了，精心挑選的初代御三家來賣萌，女神一定被萌到在我廣闊的胸懷，然后愛上我，我在愛情的滋潤下，我很快就會升職加薪，當(dāng)上總經(jīng)理，出入CEO， 挑戰(zhàn)白富美，走上人生巔峰。哈哈哈哈哈哈啊哈。
?
“啊，歐巴好厲害喲~最后一次拜托你，能不能做個滾動的時候角色上下出現(xiàn)的效果。弄完我請你吃飯喲。”
?
。。。。。。居然還是沒有留意我的表白。。。但是，女神要請我吃飯了，想想都有點激動。不過請吃飯這事，應(yīng)該反過來才對，我無數(shù)次幻想這樣的場景：我在萬眾矚目下，大喊“女神我暗戀你好久了，我好喜歡你！我一定會追到你，然后我要帶你去吃KFC。”
?
【視差滾動一種效果實現(xiàn)】
上下顛倒出現(xiàn)，這個跟原理三是一樣的，唯獨就是不是所有的元素都是往上升，而是一些元素上升，一些元素下沉。在計算top值的時候，不是“加上”，變成 “減去”scrollTop就會有相應(yīng)的效果。親自試了一下，效果就出來了，但是很明顯有個問題，就是上升元素和下沉元素在同一水平線上的時候，這時卻不 是在頁面正中間。這時候思考一下問題所在就好了。計算top的公式是下面
newTop1 = oldTop1 + scrollTop * x1 ; // (x是個系數(shù))
newTop2 = oldTop2 - scrollTop * x2 ; //(x是個系數(shù))
?
我們假設(shè)，oldTop為-1000，oldTop2為1000，我們希望滾動到500的時候，兩者在同一水平線上，這時newTop1和newTop2都相同為500才能再頁面中心（注意不是0，自個想想就明白）。這樣得到x1為2，x2為0。代碼如下。
var sona = document.getElementById('sona'),
ahri = document.getElementById('ahri');
var old_top1 = -1000,
old_top2 = 1000;
addEvent(window,'scroll',onScroll);
onScroll();
function onScroll(e){
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
sona.style.top = old_top1+scrollTop*2+'px';
ahri.style.top = old_top2-scrollTop*0+'px';
}
function addEvent(eventTarget, eventType, eventHandler) {
if (eventTarget.addEventListener) {
eventTarget.addEventListener(eventType, eventHandler, false);
} else {
if (eventTarget.attachEvent) {
eventType = "on" + eventType;
eventTarget.attachEvent(eventType, eventHandler);
} else {
eventTarget["on" + eventType] = eventHandler;
}
}
}
?
所以，如果在多種效果混合使用，希望滾動到某地方的時候，某兩個dom元素在同一水平線上且在頁面中間，代入?yún)?shù)，得到不同x1，x2即可。
?
?
這次精挑細(xì)選兩個LOL美女來做素材，女神就可以看出我在游戲方面，和游戲方面，還有游戲方面的知識淵博。這次的任務(wù)非常簡單，我很快的Q回女神。女神也表示了感激之情，并約定在那里吃飯。我們在Q上輕松的聊了起來。氣氛也越來越好，看來時機成熟了。
?
我“聊到這么晚了，差不多要睡了”
女神“嗯，都很晚了，今天晚上超冷”
我“妹子，話說你需不需要一個又會暖被子，又會陪著你聊天的男朋。。。”
女神“哈哈，不用了。我男朋友都趴在我身上，看著我跟你聊天很久了。
?
。
?
。。
?
。。。
?
。。。。。
?
真是一個感動的愛（diao）情（si）故事
?
原文： 視差滾動的愛情故事之優(yōu)化篇 | 騰訊Web前端 AlloyTeam 團隊 Blog | 愿景: 成為業(yè)界卓越的Web團隊
?
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯(lián)系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
