視差滾動開發流程與套件介紹

Chingya

Published in

✨ 黑洞創造 BlackHole Creative ✨

14 min readJun 20, 2022

👁‍🗨 創造豐富的瀏覽體驗，看不膩的視差滾動效果

視差滾動介紹

什麼是視差滾動？

視差滾動（Parallax Scrolling）效果，指的是利用滑鼠滾動捲軸時，使多個圖層以不同的速度移動，近景移動速度快、遠景移動速度慢，讓 2D 的畫面可以製作出 3D 的景深效果。使用者能夠在瀏覽網頁時，視覺上產生立體空間的感受，一種有趣的視覺體驗。

視差（parallax）效果起先是在遊戲領域中常見的手法，運用在背景移動的效果上；而後，網頁設計師於 2011 年開始使用 HTML 和 CSS 製作與使用視差滾動效果，製造出來的酷炫效果被大量應用。隨著開發使用的人數增加，有開發者搭配 JS 使用，發展出更多不同類型的呈現方式，更有許多開發者創造出方便使用的套件。

更詳細的歷史與原理可以看這篇 👉 網頁動態效果 — 視差滾動案例

接者，根據原理我們來嘗試製作一個視差滾動效果吧！

視差滾動開發

方法一：使用純 CSS 和 JS

根據視差滾動的原理，可以用 window.addEventListener("scroll", () => {}) 來製作，並且使用 transform 中的 translate() 改變元件本身的 X 軸和 Y 軸定位，或是使用 background-image 中的 backgroundPosition 改變背景圖片的 X 軸和 Y 軸定位，這兩種寫法都是讓背景與其他元間之間的移動產生速度上或位置上的差別，製造出視差滾動的效果。

舉例來說，上方的第一個部分是用 container 包覆四個圖片元件，分別是鳥、樹、山前景、山背景圖片，利用 Position 制定位置後，再監聽 window.pageYOffset 的數值（亦可以使用 window.scrollY 來取得，但前者的兼容性較佳），使用 transform 的 translate() ，並且將它設置成增減滾動數值的倍數，就可以看到圖片會跟著滾軸移動。

//HTML
<div class="container" id="img_bg">
  <h1>Parallax-Demo</h1>
  <img id="img_m2" src="img/mountain3.png" alt="">
  <img id="img_m1" src="img/mountain2.png" alt="">
  <img id="img_tree" src="img/tree.png" alt="">
  <img id="img_bird" src="img/bird.png" alt="">
</div>//JS
let windowheight = window.innerHeight;
let img_bg = document.getElementById("img_bg");
let img_bird = document.getElementById("img_bird");
let img_tree = document.getElementById("img_tree");
let img_m1 = document.getElementById("img_m1");
let img_m2 = document.getElementById("img_m2");

window.addEventListener("scroll", () => {
  let value = window.scrollY;
  if (value < windowheight) {    
    img_bg.style.backgroundPositionY = value * 0.7 + "px";
    img_m2.style.transform = `translate( ${value * -0.3}px , ${value * 0.5}px)`;
    img_m1.style.transform = `translate( ${value * 0.3}px , ${value * 0.4}px)`;
    img_tree.style.transform = `translate( 0px , ${value * 0.3}px)`;
    img_bird.style.transform = `translate( ${value * -0.4}px , ${value * 0.6}px)`;   
  }
});

再來第二個部分，是利用 section 的背景圖片，依照同樣的原理設置 backgroundPositionY，可以看到滾軸移動時圖片也會些微的往下移動，造成圖片移動比文字慢的效果。

//HTML
<section id="home">
  <h1>Simple parallax sections</h1>
</section>
<section id="home2">
  <h1>Hey look, a title</h1>
</section>
<section id="home3">
  <h1>They just keep coming</h1>
</section>//JS
let home = document.getElementById("home");
let home2 = document.getElementById("home2");
let home3 = document.getElementById("home3");

home.style.backgroundPositionY = -windowheight / 2 + "px";
home2.style.backgroundPositionY = -windowheight / 2 + "px";
home3.style.backgroundPositionY = -windowheight / 2 + "px";

window.addEventListener("scroll", () => {
  let value = window.scrollY;
  let value2 = value - windowheight * 0.5;
  let value3 = value - windowheight * 1.5;
  let value4 = value - windowheight * 2.5;
  if (windowheight * 0.5 < value) {
    home.style.backgroundPositionY = ((-windowheight / 2) + value2 * 0.5) + "px";
  }
  if (windowheight * 1.5 < value) {
    home2.style.backgroundPositionY = ((-windowheight / 2) + value3 * 0.5) + "px";
  }
  if (windowheight * 2.5 < value) {
    home3.style.backgroundPositionY = ((-windowheight / 2) + value4 * 0.5) + "px";
  }
});

這個寫法可能會因為頁面長度和物件越來越多時，scroll 長度較不易調整。因此在複雜的情況下，我們可以使用套件來解決，網路上有許多可以用來製作 Parallax Scrolling 的第三方套件，例如：Parallax.js、skrollr.js、ScrollMagic.js、rellax.js、Paroller.js…等等。

不過，這邊要先介紹的是前一篇提到的動畫工具 GSAP 中所提供的套件 ScrollTrigger，這個套件也能夠實現上面所製作的視差滾動效果，並且操控和調整的方式更加方便。

方法二：使用 GSAP 的 ScrollTrigger 套件

GSAP 官方所提供的 ScrollTrigger 套件可以用來製作滾軸動畫，並且官方上面的說明也如同 GSAP 的動畫參數一樣清楚，使用的方式需要先安裝套件，可使用 CDN 的方式引入。

<script src="<https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js>"></script>
<script src="<https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js>"></script>

接著在 GSAP 安裝 ScrollTrigger。

gsap.registerPlugin(ScrollTrigger);

然後就可以使用 gsap.to() 的參數位置加上 scrollTrigger，接著指定 trigger 的物件，動畫會在指定物件出現在畫面上的時候撥放，而若是需要根據滾軸改變位置的話，則只需加上 scrub: true，不需要額外思考 scroll 的數值需要如何調整。 🧐

let windowheight = window.innerHeight;
//Part1
gsap.to("#img_bg", {
  backgroundPositionY: `${windowheight / 2}px`,
  ease: "none",
  scrollTrigger: {
    trigger: "#img_bg",  //觸發得物件
    scrub: true,         //物件動畫根據卷軸捲動程度跑
    start: "top top",    //物件開始位置, 卷軸開始位置
    end: "bottom top",   //物件結束位置, 卷軸結束位置
  },
});let ContainerArr = [
  { el: "#img_bird", x: -4, y: 0.6 },
  { el: "#img_m2", x: -3, y: 0.5 },
  { el: "#img_m1", x: 3, y: 0.4 },
  { el: "#img_tree", x: 0, y: 0.3 },
];
ContainerArr.forEach((obj) => {
  gsap.to(obj.el, {
    transform: `translate( ${obj.x * 100}px , ${windowheight * obj.y}px)`,
    ease: "none",
    scrollTrigger: {
      trigger: "#img_bg",
      scrub: true,
      start: "top top",
      end: "bottom top",
    },
  });
});//Part2
let arr = ["#home", "#home2", "#home3"];
arr.forEach((element) => {
  gsap.fromTo(
    element,
    {
      backgroundPositionY: `${-windowheight / 2}px`,
    },
    {
      backgroundPositionY: `${windowheight / 2}px`,
      ease: "none",
      scrollTrigger: {
        trigger: element,
        scrub: true,
      },
    }
  );
});

方法二製作出來的效果比方法一的效果更加流暢，此外，它也提供 start 和 end 的參數，可以調整撥放動畫所開始和結束的滾軸位置，並且有 markers 功能可以看到位置的標示（調整完之後可以把 markers 關掉~），使用上更容易去操作。

其他 Parallax 套件

前面有提到可以使用第三方套件來製作視差滾動效果，這邊就說明幾個較多人使用的套件：

RELLAX.js

不須過多操作 JS，利用 class 設定以及 data 屬性輕鬆調整 Speed 和 Z-index。
簡單易懂，但可操作的變化效果較少，適合只需簡單視差的網站。

Skrollr.js

以 HTML 跟 CSS 為基礎，可直接在 data 屬性上去設定滾動時的動畫轉變，若是本身就熟悉 CSS 的動畫設定，可以很快速的上手以及嘗試複雜的動畫效果。
原理是將 CSS 的 transform 從原本的秒數，變成 SkrollTop 的 px 數值，達到滾動時撥放 keyframe 的效果，因此，能夠寫入 keyframe 的效果幾乎都可以操作（如：旋轉、透明度、位置等等）。

ScrollMagic.js

操作步驟主要是：創建控制器（ScrollMagic.Controller()）、設置動畫對象、場景對象（ScrollMagic.Scene()），最後將動畫加入控制器上（ScrollMagic.Scene().addTo(controller)）。
設置動畫的部分可使用 CSS 動畫，也可以與 GSAP 一起使用，製作出更豐富動畫效果。