故事說(shuō)起在一個(gè)冰冷幽暗的夜晚上，我正思考的十分重要的人生問(wèn)題，這周末該去那里happy好呢？是宅在家里好呢，或者宅在家里好呢，還是宅在家里 好呢？這時(shí)，萬(wàn)年隱身的QQ竟然浮起淺色聊天框，我去！不得了，居然是女神主動(dòng)聯(lián)系我，女神一定是因?yàn)槲铱±实奈骞伲?85的模特身材而深深地迷戀上我 了，呵呵呵呵呵呵。

?

“誒，譚偉X，你在干嘛呢？”

“沒(méi)啊，在思考人生?！?? 難道這是要約我的節(jié)奏嗎？在妹子前必須保持冷靜。
“那個(gè)這周我要搞一個(gè)游戲宣傳的頁(yè)面，設(shè)計(jì)師說(shuō)用【視差滾動(dòng)】的效果，你能做個(gè)demo頁(yè)給我看看？”

?

。。。。。。。。。沒(méi)事！雖然跟我預(yù)想有點(diǎn)出入，但女神這是在考驗(yàn)我！

?

【定義】

?

所謂的視差滾動(dòng)，就是在頁(yè)面滾動(dòng)過(guò)程中，多層次的元素進(jìn)行不同程度的位移，帶來(lái)立體的視差效果。還有很多的奇思妙想的展現(xiàn)方式，都是滾動(dòng)頁(yè)面觸發(fā)的，也可稱(chēng)為視差滾動(dòng)。視差滾動(dòng)里面最基礎(chǔ)的就是切換背景，這點(diǎn)其實(shí)一個(gè)CSS就滿(mǎn)足了

?

【視差滾動(dòng)原理一】
background-attachment: fixed || scroll || local
默認(rèn)是scroll，內(nèi)容跟著背景走，而視差滾動(dòng)頁(yè)面里用fixed，背景相對(duì)頁(yè)面固定而不跟內(nèi)容滾動(dòng)。

?

很快地我就做出了一個(gè)demo出來(lái)，還特意配上幾張優(yōu)雅的圖片和極富內(nèi)涵的詞句，女神一定會(huì)因?yàn)槲业奈牟啥鴲?ài)上我的，而且，那些看似簡(jiǎn)單的“我是內(nèi) 容”不斷重復(fù)，其實(shí)只要細(xì)心就會(huì)發(fā)現(xiàn)里面隱藏著我的表白，情商如此之高的女神，一定會(huì)發(fā)現(xiàn)，然后我們就可以幸福的在一起，在愛(ài)情的滋潤(rùn)下，我很快就能升職 加薪，當(dāng)上總經(jīng)理，出任CEO，贏取白富美，走上人生巔峰。哈哈哈哈哈哈哈哈，誒？好像不用贏取白富美，那就挑戰(zhàn)白富美。

?

demo1_base

?

“咦，怎么是靜態(tài)的，譚偉X，能不能幫我做個(gè)會(huì)動(dòng)的那種的視差滾動(dòng)，麻煩了么么噠~”

?

。。。。。。居然完全沒(méi)有留意到我溢出的文采和隱藏的表白。。。。。沒(méi)事！雖然跟我預(yù)想有點(diǎn)出入，但女神這是在考驗(yàn)我！

?

【視差滾動(dòng)原理二】
女神想要些更加豐富的效果，也對(duì)，像我這么內(nèi)涵有檔次的程序員，當(dāng)然要來(lái)寫(xiě)非?？岬膭?dòng)畫(huà)效果。
在原理的demo1的基礎(chǔ)上，我在scroll事件上添加一些動(dòng)畫(huà)事件。

      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');
        }
    })
    

?

視差滾動(dòng)的表現(xiàn)方式非常多，滾動(dòng)到頁(yè)面某個(gè)值后會(huì)觸發(fā)一個(gè)CSS3動(dòng)畫(huà)，這也是眾多視差滾動(dòng)中常見(jiàn)的一種。

?

demo2_anim

?

(這個(gè)Demo使用了CSS3動(dòng)畫(huà)，請(qǐng)使用現(xiàn)代瀏覽器查看)

?

【視差滾動(dòng)原理三】
視差滾動(dòng)中最突出的內(nèi)容就是立體的視差效果，最具有說(shuō)明代表性的就是超級(jí)瑪麗的游戲場(chǎng)景

?

?

當(dāng)玩家操作馬里奧移動(dòng)時(shí)，水管和墻塊更馬里奧在同一水平層，移動(dòng)速度最快。天上的白云為中層背景圖，移動(dòng)速度中等。而小山丘是最遠(yuǎn)的背景圖，移動(dòng)速度最慢。三個(gè)層次內(nèi)容按不同速度移動(dòng)，就會(huì)帶來(lái)一種立體的視差效果。

?

在dom結(jié)構(gòu)上，把同一層的dom元素都放到一個(gè)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>
    

?

在頁(yè)面滾動(dòng)過(guò)程中，我們獲取頁(yè)面的scrollTop的值，根據(jù)不同參數(shù)值去設(shè)置各自scene的top值，這樣滾動(dòng)頁(yè)面的時(shí)候，不同的速度就出來(lái)了

      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)系，代碼有點(diǎn)搓，也沒(méi)有做兼容性，但是原理就是這樣的。

?

demo3_scene

?

這個(gè)Demo在非IE6/7下都能查看，只是,IE8的效果并不太好。Firefox效果最好。

?

這里還有個(gè)特殊情況：在Chrome下查看這個(gè)Demo請(qǐng)拖動(dòng)滾動(dòng)條，而不是滾動(dòng)鼠標(biāo)。 原因是Chrome瀏覽器對(duì)鼠標(biāo)的滾動(dòng)做了優(yōu)化處理，滾動(dòng)一個(gè)齒輪幅度，其他瀏覽器是觸發(fā)十幾次scroll事件，而Chrome只會(huì)觸發(fā)一次。只有一幀的動(dòng)畫(huà)，大家想想就知道。這里可以考慮加入緩動(dòng)動(dòng)畫(huà)，本Demo是基于原理說(shuō)明和 泡女神 ，具體可以留意下一篇博客優(yōu)化篇

?

兩個(gè)demo完事后，很快地就交到女神手上，這次我在demo特意多加上幾句（真的是幾句？）表白，女神這次一定能發(fā)現(xiàn)的。而且，pokemon都 出來(lái)幫忙了，精心挑選的初代御三家來(lái)賣(mài)萌，女神一定被萌到在我廣闊的胸懷，然后愛(ài)上我，我在愛(ài)情的滋潤(rùn)下，我很快就會(huì)升職加薪，當(dāng)上總經(jīng)理，出入CEO， 挑戰(zhàn)白富美，走上人生巔峰。哈哈哈哈哈哈啊哈。

?

“啊，歐巴好厲害喲~最后一次拜托你，能不能做個(gè)滾動(dòng)的時(shí)候角色上下出現(xiàn)的效果。弄完我請(qǐng)你吃飯喲?！?

?

。。。。。。居然還是沒(méi)有留意我的表白。。。但是，女神要請(qǐng)我吃飯了，想想都有點(diǎn)激動(dòng)。不過(guò)請(qǐng)吃飯這事，應(yīng)該反過(guò)來(lái)才對(duì)，我無(wú)數(shù)次幻想這樣的場(chǎng)景：我在萬(wàn)眾矚目下，大喊“女神我暗戀你好久了，我好喜歡你！我一定會(huì)追到你，然后我要帶你去吃KFC。”

?

【視差滾動(dòng)一種效果實(shí)現(xiàn)】
上下顛倒出現(xiàn)，這個(gè)跟原理三是一樣的，唯獨(dú)就是不是所有的元素都是往上升，而是一些元素上升，一些元素下沉。在計(jì)算top值的時(shí)候，不是“加上”，變成 “減去”scrollTop就會(huì)有相應(yīng)的效果。親自試了一下，效果就出來(lái)了，但是很明顯有個(gè)問(wèn)題，就是上升元素和下沉元素在同一水平線上的時(shí)候，這時(shí)卻不 是在頁(yè)面正中間。這時(shí)候思考一下問(wèn)題所在就好了。計(jì)算top的公式是下面

      newTop1 = oldTop1 + scrollTop * x1 ;  // (x是個(gè)系數(shù))
newTop2 = oldTop2 - scrollTop * x2 ;   //(x是個(gè)系數(shù))
    

?

我們假設(shè)，oldTop為-1000，oldTop2為1000，我們希望滾動(dòng)到500的時(shí)候，兩者在同一水平線上，這時(shí)newTop1和newTop2都相同為500才能再頁(yè)面中心（注意不是0，自個(gè)想想就明白）。這樣得到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;
         }
    }
}
    

?

所以，如果在多種效果混合使用，希望滾動(dòng)到某地方的時(shí)候，某兩個(gè)dom元素在同一水平線上且在頁(yè)面中間，代入?yún)?shù)，得到不同x1，x2即可。

?

demo4_reverse

?

這次精挑細(xì)選兩個(gè)LOL美女來(lái)做素材，女神就可以看出我在游戲方面，和游戲方面，還有游戲方面的知識(shí)淵博。這次的任務(wù)非常簡(jiǎn)單，我很快的Q回女神。女神也表示了感激之情，并約定在那里吃飯。我們?cè)赒上輕松的聊了起來(lái)。氣氛也越來(lái)越好，看來(lái)時(shí)機(jī)成熟了。

?

我“聊到這么晚了，差不多要睡了”
女神“嗯，都很晚了，今天晚上超冷”
我“妹子，話說(shuō)你需不需要一個(gè)又會(huì)暖被子，又會(huì)陪著你聊天的男朋。。。”
女神“哈哈，不用了。我男朋友都趴在我身上，看著我跟你聊天很久了。

?

。

?

。。

?

。。。

?

。。。。。

?

真是一個(gè)感動(dòng)的愛(ài)（diao）情（si）故事

?

原文： 視差滾動(dòng)的愛(ài)情故事之優(yōu)化篇 | 騰訊Web前端 AlloyTeam 團(tuán)隊(duì) Blog | 愿景: 成為業(yè)界卓越的Web團(tuán)隊(duì)

?