動效案例：純手工寫一個滾動視差效果

大家好，今天我們一起來實踐一個滾動視差的動畫效果。雖然我們不是設計師，不擅長PS、AE，但是我們完全可以通過前端技術設計一幅漂亮的畫面，今天我們要設計一幅月下山間小道開車的畫面。在介紹之前，我們首先了解下什麼是滾動視差，有助於我們實現這個案例。

一、什麼是滾動視差？

視差滾動（Parallax Scrolling）是指讓多層背景以不同的速度移動，形成立體的運動效果，帶來非常出色的視覺體驗。作爲網頁設計的熱點趨勢，越來越多的網站應用了這項技術。

視差效果，原本是一個天文學術語，當我們觀察星空時，離我們遠的星星移動速度較慢，離我們近的星星移動速度則較快。當我們坐在車上向車窗外 看時，也會有這樣的感覺，遠處的羣山似乎沒有在動，而近處的稻田卻在飛速掠過。許多遊戲中都使用視差效果來增加場景的立體感。說的簡單點就是網頁內的元素在滾動屏幕時發生的位置的變化，然而各個不同的元素位置變化的速度不同，導致網頁內的元素有層次錯落的錯覺，這和我們人體的眼球效果很像。我看到多家產品商用視差滾動效果來展示產品，從不同的空間角度和用戶體驗，起到了非常不錯的效果。

本內容來自百度百科

二、案例的效果展示

你可能迫不及待的想知道我們要做個什麼樣的效果，如下視頻所示，我們滾動往下滑動瀏覽器的滾動條，月亮往左邊移動，高山往上移動，文字往下移動，最終隨着滾動條的滾動，淡出我們的視野，如下視頻所示：

三、涉及到知識點

1、mix-blend-mode

你可能注意到了我們界面上的圖片色調基本一致，其實原圖片是有色彩的，那麼問題來了，是如何實現這個效果呢，我們在所有的圖片上層蓋了一個背景色，這裏用到 mix-blend-mode:color 的屬性進行與圖片的顏色進行混合。這是 CSS3 新增的屬性，其中 mix 和 blend 的中文意譯均爲混合，那麼這個屬性的作用直譯過來就是混合混合模式，當然，我們我們通常稱之爲混合模式。

混合模式最常見於 photoshop 中，是 PS 中十分強大的功能之一。當然，瞎用亂用混合模式誰都會，利用混合模式將多個圖層混合得到一個新的效果，只是要用到恰到好處，或者說在 CSS 中利用混合模式製作出一些效果則需要對混合模式很深的理解及不斷的嘗試。

  mix-blend-mode: normal;         // 正常
  mix-blend-mode: multiply;       // 正片疊底
  mix-blend-mode: screen;         // 濾色
  mix-blend-mode: overlay;        // 疊加
  mix-blend-mode: darken;         // 變暗
  mix-blend-mode: lighten;        // 變亮
  mix-blend-mode: color-dodge;    // 顏色減淡
  mix-blend-mode: color-burn;     // 顏色加深
  mix-blend-mode: hard-light;     // 強光
  mix-blend-mode: soft-light;     // 柔光
  mix-blend-mode: difference;     // 差值
  mix-blend-mode: exclusion;      // 排除
  mix-blend-mode: hue;            // 色相
  mix-blend-mode: saturation;     // 飽和度
  mix-blend-mode: color;          // 顏色
  mix-blend-mode: luminosity;     // 亮度

爲了更好理解這個屬性，我們可以借鑑PS混合圖層

2、window屬性：scrollY

在這裏我們使用JS腳本動態更新相關圖片在界面的位置，這是我們製作滾動視差的關鍵。我們通過window的scrollY屬性來充當因子變量，控制各圖片在平面移動的距離，來回滾動又能恢復原先各自的位置。

Window接口的只讀scrollY屬性返回文檔當前垂直滾動的像素數。這個值在現代瀏覽器中是亞像素精確的，這意味着它不一定是整數。您可以從scrollX屬性中獲取文檔水平滾動的像素數。實際上，返回值是一個雙精度浮點值，表示文檔當前從原點垂直滾動的像素數，其中正值表示內容向上滾動。

四、準備圖片素材

首先我們先準備下四張素材圖片，分別對應星空、月亮、高山、奔馳在山間小路的小車，請注意這四張圖片的大小一定要保持一致，儘量png圖片，方便圖片疊加成一張大圖，圖片資源可以在文末源碼下載鏈接裏進行獲取。

五、創建HTML結構

HTML結構非常簡單，我們依次排列圖片，放在 p 標籤區域即可，示例代碼如下：

   <p>
      <img src="./images/bg.jpg" id="bg" />
      <img src="./images/moon.png" id="moon" style="z-index: 3;" />
      <img src="./images/mountain.png" id="mountain" />
      <img src="./images/road.png" id="road" />
      <h2 id="text">Moon Light</h2>
    </p>

六、編寫CSS部分

1、首先我們來定義全局屬性，引用字體Poppins，設定背景色爲墨蘭色，視口高度爲150Vh, 讓瀏覽器出現滾動條，示例代碼如下：

@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap');

* {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}

body {
    background: #0a2a43;
    min-height: 150vh;
}

2、接下來我們來定義 p 區域爲彈性盒子容器，並定義position: relative; 讓內部的圖片參照其進行位置浮動，改變其正常流的佈局方式。

p {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

p img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

3、接下來我們使用僞元素 ::before 和 ::after 來在p區域在所有的圖片上覆蓋一層墨藍色的背景，使用mix-blend-mode: color 屬性讓圖片的顏色保持一致性，給人一種月色已晚高冷的感覺，並在圖片下方繪製一種線性漸變的背景色，讓其自然過渡到非圖片區域。示例代碼如下：

p::before {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(to top, #0a2a43, transparent);
    z-index: 10000;
}

p::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0a2a43;
    z-index: 10000;
    mix-blend-mode: color;
}

4、最後爲了讓文字有一種夾在高山和山間小路之間的感覺，讓文字往下移動時，被山間小路圖片蓋住，這裏我們需要更改 z-index屬性，示例代碼如下：

#text {
    position: relative;
    color: #fff;
    font-size: 10em;
    z-index: 1;
}

#road {
    z-index: 2;
}

到這裏我們的CSS部分就結束了，是不是很簡單呢，最後我們來編寫JS腳本。

七、編寫腳本

JS腳本爲本示例的核心部分，這裏通過定義變量獲取window.scrollY的屬性，作爲變量因子，更改各圖片的移動位置，並能進行恢復各自初始的位置，腳本代碼如下：

let bg = document.getElementById("bg");
let moon = document.getElementById("moon");
let mountain = document.getElementById("mountain");
let road = document.getElementById("road");
let text = document.getElementById("text");

window.addEventListener('scroll', function () {
    var value = window.scrollY;
    bg.style.top = value * 0.5 + 'px';
    moon.style.left = -value * 0.5 + 'px';
    mountain.style.top = -value * 0.15 + 'px';
    road.style.top = value * 0.15 + 'px';
    text.style.top = value * 1 + 'px';
});

八、源碼及效果展示

最終的效果體驗，大家可以點擊文末 原文鏈接 進行體驗(高清寬屏大圖，請耐心等待下載，手機橫屏體驗)，由於文章篇幅有限，完整的源碼大家可以點擊以下鏈接下載：

鏈接:https://pan.baidu.com/s/1kMu94YYvgJNVauLV6dNsEA 

密碼:et62

小節

到此，我們一起完成了這個案例，通過本案例，我們學會了如何純手工實現一個簡單的滾動視差效果。感謝你的閱讀，如果你喜歡我的分享，麻煩給個關注、點贊加轉發哦，你的支持，就是我分享的動力，後續會持續分享更實用的案例，歡迎持續關注。

專注分享當下最實用的前端技術。關注前端達人，與達人一起學習進步！

長按關注"前端達人"