故事說起在一個冰冷幽暗的夜晚上，我正思考的十分重要的人生問題，這周末該去那里happy好呢？是宅在家里好呢，或者宅在家里好呢，還是宅在家里 好呢？這時，萬年隱身的QQ竟然浮起淺色聊天框，我去！不得了，居然是女神主動聯系我，女神一定是因為我俊朗的五官，185的模特身材而深深地迷戀上我 了，呵呵呵呵呵呵。

?

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

“沒啊，在思考人生。” ? 難道這是要約我的節奏嗎？在妹子前必須保持冷靜。
“那個這周我要搞一個游戲宣傳的頁面，設計師說用【視差滾動】的效果，你能做個demo頁給我看看？”

?

。。。。。。。。。沒事！雖然跟我預想有點出入，但女神這是在考驗我！

?

【定義】

?

所謂的視差滾動，就是在頁面滾動過程中，多層次的元素進行不同程度的位移，帶來立體的視差效果。還有很多的奇思妙想的展現方式，都是滾動頁面觸發的，也可稱為視差滾動。視差滾動里面最基礎的就是切換背景，這點其實一個CSS就滿足了

?

【視差滾動原理一】
background-attachment: fixed || scroll || local
默認是scroll，內容跟著背景走，而視差滾動頁面里用fixed，背景相對頁面固定而不跟內容滾動。

?

很快地我就做出了一個demo出來，還特意配上幾張優雅的圖片和極富內涵的詞句，女神一定會因為我的文采而愛上我的，而且，那些看似簡單的“我是內 容”不斷重復，其實只要細心就會發現里面隱藏著我的表白，情商如此之高的女神，一定會發現，然后我們就可以幸福的在一起，在愛情的滋潤下，我很快就能升職 加薪，當上總經理，出任CEO，贏取白富美，走上人生巔峰。哈哈哈哈哈哈哈哈，誒？好像不用贏取白富美，那就挑戰白富美。

?

demo1_base

?

“咦，怎么是靜態的，譚偉X，能不能幫我做個會動的那種的視差滾動，麻煩了么么噠~”

?

。。。。。。居然完全沒有留意到我溢出的文采和隱藏的表白。。。。。沒事！雖然跟我預想有點出入，但女神這是在考驗我！

?

【視差滾動原理二】
女神想要些更加豐富的效果，也對，像我這么內涵有檔次的程序員，當然要來寫非常酷的動畫效果。
在原理的demo1的基礎上，我在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');
        }
    })
    

?

視差滾動的表現方式非常多，滾動到頁面某個值后會觸發一個CSS3動畫，這也是眾多視差滾動中常見的一種。

?

demo2_anim

?

(這個Demo使用了CSS3動畫，請使用現代瀏覽器查看)

?

【視差滾動原理三】
視差滾動中最突出的內容就是立體的視差效果，最具有說明代表性的就是超級瑪麗的游戲場景

?

?

當玩家操作馬里奧移動時，水管和墻塊更馬里奧在同一水平層，移動速度最快。天上的白云為中層背景圖，移動速度中等。而小山丘是最遠的背景圖，移動速度最慢。三個層次內容按不同速度移動，就會帶來一種立體的視差效果。

?

在dom結構上，把同一層的dom元素都放到一個div里面，html結構如下。

      <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的值，根據不同參數值去設置各自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;
        }
    }
}
    

?

由于女神在等待的關系，代碼有點搓，也沒有做兼容性，但是原理就是這樣的。

?

demo3_scene

?

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

?

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

?

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

?

“啊，歐巴好厲害喲~最后一次拜托你，能不能做個滾動的時候角色上下出現的效果。弄完我請你吃飯喲。”

?

。。。。。。居然還是沒有留意我的表白。。。但是，女神要請我吃飯了，想想都有點激動。不過請吃飯這事，應該反過來才對，我無數次幻想這樣的場景：我在萬眾矚目下，大喊“女神我暗戀你好久了，我好喜歡你！我一定會追到你，然后我要帶你去吃KFC。”

?

【視差滾動一種效果實現】
上下顛倒出現，這個跟原理三是一樣的，唯獨就是不是所有的元素都是往上升，而是一些元素上升，一些元素下沉。在計算top值的時候，不是“加上”，變成 “減去”scrollTop就會有相應的效果。親自試了一下，效果就出來了，但是很明顯有個問題，就是上升元素和下沉元素在同一水平線上的時候，這時卻不 是在頁面正中間。這時候思考一下問題所在就好了。計算top的公式是下面

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

?

我們假設，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元素在同一水平線上且在頁面中間，代入參數，得到不同x1，x2即可。

?

demo4_reverse

?

這次精挑細選兩個LOL美女來做素材，女神就可以看出我在游戲方面，和游戲方面，還有游戲方面的知識淵博。這次的任務非常簡單，我很快的Q回女神。女神也表示了感激之情，并約定在那里吃飯。我們在Q上輕松的聊了起來。氣氛也越來越好，看來時機成熟了。

?

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

?

。

?

。。

?

。。。

?

。。。。。

?

真是一個感動的愛（diao）情（si）故事

?

原文： 視差滾動的愛情故事之優化篇 | 騰訊Web前端 AlloyTeam 團隊 Blog | 愿景: 成為業界卓越的Web團隊

?