視差滾動效果原理解析和效果實現

【定義】

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

【視差滾動原理一】

1	background-attachment: fixed || scroll || local

默認是scroll，內容跟着背景走，而視差滾動頁面里用fixed，背景相對頁面固定而不跟內容滾動。

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

【視差滾動原理二】

當然要來寫非常酷的動畫效果。
在原理的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;
        }
    }
}

【視差滾動一種效果實現】
上下顛倒出現，這個跟原理三是一樣的，唯獨就是不是所有的元素都是往上升，而是一些元素上升，一些元素下沉。在計算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;
         }
    }
}