摘要：練習(xí)視差滾動(dòng)例子介紹一下視差指網(wǎng)頁(yè)滾動(dòng)過(guò)程中，多層次的元素進(jìn)行不同程度的移動(dòng)，視覺(jué)上形成立體運(yùn)動(dòng)效果的網(wǎng)頁(yè)展示技術(shù)。背景圖像會(huì)隨著頁(yè)面其余部分的滾動(dòng)而移動(dòng)。

指網(wǎng)頁(yè)滾動(dòng)過(guò)程中，多層次的元素進(jìn)行不同程度的移動(dòng)，視覺(jué)上形成立體運(yùn)動(dòng)效果的網(wǎng)頁(yè)展示技術(shù)。
通過(guò)前景與背景在場(chǎng)景移動(dòng)時(shí)產(chǎn)生不同的視差，從而達(dá)到簡(jiǎn)單的立體效果

說(shuō)的簡(jiǎn)單點(diǎn)就是網(wǎng)頁(yè)內(nèi)的元素在滾動(dòng)屏幕時(shí)發(fā)生的位置的變化，然而各個(gè)不同的元素位置變化的速度不同，導(dǎo)致網(wǎng)頁(yè)內(nèi)的元素有層次錯(cuò)落的錯(cuò)覺(jué),例如js的鼠標(biāo)坐標(biāo)移動(dòng)實(shí)現(xiàn)

或者相對(duì)來(lái)說(shuō),一個(gè)動(dòng),另外一個(gè)不動(dòng),也能造成視覺(jué)落差的感覺(jué),例如css的backgroud-attacthment實(shí)現(xiàn)

屬性:

background-attachment -- 定義背景圖片隨滾動(dòng)軸的移動(dòng)方式

取值: scroll | fixed | inherit
scroll: 默認(rèn)值。背景圖像會(huì)隨著頁(yè)面其余部分的滾動(dòng)而移動(dòng)。
fixed: 當(dāng)頁(yè)面的其余部分滾動(dòng)時(shí)，背景圖像不會(huì)移動(dòng)。
inherit: 規(guī)定應(yīng)該從父元素繼承 background-attachment 屬性的設(shè)置。
初始值: scroll
繼承性: 否
適用于: 所有元素

效果:

例如,當(dāng)向下滾動(dòng)鼠標(biāo)的時(shí)候,

背景圖像固定了位置(section1和2的背景圖會(huì)固定在當(dāng)前瀏覽器顯示界面,并且section1會(huì)擋住section2,因?yàn)槎荚谕粋€(gè)位置,然后1比2的位置靠前),

然后頁(yè)面其他部分就會(huì)向上移動(dòng)(所謂前景,就是section1和2的div dom元素),

向上移動(dòng)的時(shí)候,section2的dom會(huì)跟著進(jìn)入當(dāng)前頁(yè)面,所以會(huì)慢慢打開(kāi)section2的畫(huà)面,

所以看起來(lái)背景圖被固定住,這樣就會(huì)造成了一個(gè)視覺(jué)落差.

代碼:

    
    
    
    



    啊啊啊啊


    噢噢噢噢

效果:

通過(guò)移動(dòng)鼠標(biāo),不斷改變div的位置值來(lái)實(shí)現(xiàn)移動(dòng),并且通過(guò)2個(gè)不一樣的值的變化來(lái)實(shí)現(xiàn)落差,從而實(shí)現(xiàn)視差效果

        body{
            /*為了顯示需要*/
            width: 100%;
            /*因?yàn)闉g覽器的高度獲取會(huì)出現(xiàn)兼容問(wèn)題,所以為了方便測(cè)試,固定一個(gè)值*/
            height: 800px;
            border: solid 1px blue;
        }
        #div1{
            /*為了顯示需要*/
            width: 100px;
            height: 100px;
            border: solid 1px black;
            position: absolute;
        }
        #div2{
            /*為了顯示需要*/
            width: 200px;
            height: 200px;
            border: solid 1px red;
            position: absolute;
        }

    //獲取兩個(gè)div
    var div1 = document.getElementById("div1");
    var div2 = document.getElementById("div2");
    //獲取瀏覽器的body的寬和高,并且一般來(lái)說(shuō),body的大小就是瀏覽器顯示界面的大小
    var _w = document.body.clientWidth;
    var _h = document.body.clientHeight;
    //初始化兩個(gè)div的起始位置為瀏覽器界面的一半的位置
    div1.style.left = _w/2 + "px";
    div1.style.top = _h/2 + "px";
    div2.style.left = _w/2 + "px";
    div2.style.top = _h/2 + "px";


    var ex,ey, ex2,ey2;
    //綁定鼠標(biāo)移動(dòng)事件onmousemove,只要鼠標(biāo)移動(dòng)就會(huì)不斷接受事件
    document.onmousemove = function(e){
        //div1移動(dòng)的距離值
        //除以5或者10是為了避免數(shù)值太大移出屏幕顯示,并且2個(gè)不同的數(shù)字能夠看出區(qū)別
        ex = e.clientX / 10; //鼠標(biāo)當(dāng)前的x坐標(biāo)除以10
        ey = e.clientY / 10; //鼠標(biāo)當(dāng)前的y坐標(biāo)除以10

        //div2移動(dòng)的距離值
        ex2 = e.clientX / 5; //同上,除以5是為了看出區(qū)別
        ey2 = e.clientY / 5;

        //div1的left值等于body的一半加上div1的移動(dòng)值,同類(lèi)推top值
        //這樣就是從body的一半(屏幕中間)開(kāi)始移動(dòng)
        div1.style.left = _w/2 + ex +"px";
        div1.style.top = _h/2 + ey + "px";

        div2.style.left = _w/2 + ex2 + "px";
        div2.style.top = _h/2 + ey2 + "px";
    }

參考引用:

視差滾動(dòng)(Parallax Scrolling)效果的原理和實(shí)現(xiàn)