vue

視差滾動

視差滾動（Parallax Scrolling）指網(wǎng)頁滾動過程中，多層次的元素進行不同程度的移動。

原理

傳統(tǒng)的網(wǎng)頁的文字、圖片、背景都是一起按照相同方向相同速度滾動的，而視差滾動則是在滾動的時候，內(nèi)容和多層次的背景實現(xiàn)或不同速度，或不同方向的運動。
有的時候也可以加上一些透明度、大小的動畫來優(yōu)化顯示。
視差滾動這個概念出來已經(jīng)多年了，有很多現(xiàn)成的JQ庫，如parallax、stellar等。

實現(xiàn)

這里我們用VUE來簡單實現(xiàn)這個功能

示例

來自QQ官網(wǎng)

QQ官網(wǎng)示例

分析

此頁面中我們可以看到，在滾動的時候后面的三張背景圖和前面的內(nèi)容在以不同的速度滾動。這就是最簡單的視差滾動，比起背景紋絲不動來講，這樣會有點3D效果，相比起來也有更好的體驗。

1、如果背景不滾動，其實我們實現(xiàn)起來很簡單,只需要如下代碼即可，但是這樣沒有我們想要的視差滾動效果！

background-attachment: fixed;

2、其實我們只需要在以上基礎(chǔ)上加上背景的緩慢滾動即可，在滾動的時候我們改變background-position-y的值即可實現(xiàn)。下面是w3school的定義：

• background-position 屬性設(shè)置背景圖像的起始位置。
• 這個屬性設(shè)置背景原圖像（由 background-image 定義）的位置，背景圖像如果要重復(fù)，將從這一點開始。
• 提示：您需要把 background-attachment 屬性設(shè)置為 "fixed"，才能保證該屬性在 Firefox 和 Opera 中正常工作。

簡單實現(xiàn)

1、整體html如下

<div class="home">
    <div class="tim-content qqpc">
        <div class="title" v-bind:style="{'position':titlePositon,'background-color': titleColor,'border-bottom':titleBorder }">
            <ul>
                <li class="logoLink">11</li>
                <li class="item">首頁</li>
                <li class="item">下載</li>
                <li class="item">動態(tài)</li>
            </ul>
            
        </div>
        <div class="circle"></div>
    </div>
    <div class="content-item">內(nèi)容1</div>
    <div class="activebg fisrtbg" id="pic1" v-bind:style="{'background-position-x':positionX,'background-position-y': positionY1+'px' }"></div>
    <div class="content-item">內(nèi)容2</div>
    <div class="activebg secondbg" id="pic2" v-bind:style="{'background-position-x':positionX,'background-position-y': positionY2+'px' }"></div>
    <div class="content-item">內(nèi)容3</div>
    <div class="activebg thirdbg" id="pic3" v-bind:style="{'background-position-x':positionX,'background-position-y': positionY3+'px' }"></div>
    <div class="content-item">內(nèi)容4</div>
    <div class="foot">foot</div>
</div>

2、監(jiān)聽頁面滾動

mounted() {
    window.addEventListener("scroll", this.handleScroll);
},
methods: {
    handleScroll() {
        let scrollTop =window.pageYOffset ||document.documentElement.scrollTop ||document.body.scrollTop;
        console.log(scrollTop); //頁面滾動距離
    }
}

3、計算對應(yīng)應(yīng)該改變位置的圖片的位置

mounted() {
    window.onload = () => {
        let pic1 = document.getElementById("pic1");
        let pic2 = document.getElementById("pic2");
        let pic3 = document.getElementById("pic3");
        this.positionY1 = this.Y1 = pic1.offsetTop * this.ratio;
        this.positionY2 = this.Y2 = pic2.offsetTop * this.ratio;
        this.positionY3 = this.Y3 = pic3.offsetTop * this.ratio;
    };
},

4、根據(jù)滾動距離計算應(yīng)該偏移的距離
注：VUE支持動態(tài)改變style，參考Class 與 Style 綁定

ratio: 0.05,

handleScroll() {
    let scrollTop =window.pageYOffset ||document.documentElement.scrollTop ||document.body.scrollTop;
    console.log(scrollTop);
    this.positionY1 = this.Y1 - scrollTop * this.ratio; //原始高度-滾動距離*視差系數(shù)
    this.positionY2 = this.Y2 - scrollTop * this.ratio;
    this.positionY3 = this.Y3 - scrollTop * this.ratio;
}

5、最后實現(xiàn)效果如下，基本復(fù)現(xiàn)了QQ首頁的視差滾動效果。但是上我們這只是做了一個基本的視差滾動的效果，實際上視差滾動能做更多更炫體驗更好的效果。值得深入研究

Demo實現(xiàn)效果

附加一個滑動Title吸頂?shù)男Ч?/h3>

其實就是當滑動到一定距離的時候改變title的style屬性即可，VUE支持動態(tài)修改CSS屬性這里也就變得非常簡單

handleScroll() {
    let scrollTop =window.pageYOffset ||document.documentElement.scrollTop ||document.body.scrollTop;
    console.log(scrollTop);
    if (scrollTop > 900) {
        this.titlePositon = "fixed";
        this.titleColor = "#fff";
        this.titleBorder = "1px solid #e5e5e5";
    } else {
        this.titlePositon = "static";
        this.titleColor = "transparent";
        this.titleBorder = "0";
    }
}

純CSS實現(xiàn)

純CSS實現(xiàn)視差滾動可以參考：小tip: 純CSS實現(xiàn)視差滾動效果

參考資料

1、vue
2、項目搭建vue-cli
3、視差滾動（Parallax Scrolling）效果的原理與實現(xiàn)

完整代碼ParallaxScrolling