滾動視差(parallax)簡單教學與Lab

簡介

不知道什麼是滾動視差? 貼幾個網站給你瞧瞧:

還有一些特別的:

總之,先思考近遠景,設計各層適合的圖,讓圖層重疊著後,以不同的速度移動,近景移動速度快,遠景移動速度慢。

本文接下來借用firewatch網站的圖檔,也參考此篇文章,做個實作Lab


Lab

0. 準備工作

先將firewatch網站主視覺用到的九張圖抓下來

  • 建立html檔 ( 不妨命名為ParallaxLab.html )
  • 先CSS Reset,並開一個SCSS檔 ( 不妨命名為ParallaxLab.scss ),在html檔中引入其css連結

1. 建立html結構

  • keyart-container = 主視覺容器
  • keyart-layer = 主視覺的各圖層,準備疊圖

2. 將各背景圖導入圖層

  1. 先以這樣的CSS語法,將各圖層設定背景圖來源檔:
    #parallax-0{ background-image: url(./material/parallax0.png) }
  2. 並將整體主視覺,先設定成小小的寬高,方便一邊開發一邊觀察。

目前,畫面應該要能顯示出九張圖,並且圖片保持原本的寬高比;
各圖片寬度由於超出圖層寬,截掉兩側,以中央部位示人。

3. 設定跟隨視窗

  1. 先讓各圖層以fixed方式定位
  2. 圖層設定fixed後,div自動寬度100%的特性消失,須補寬度設定。
  3. 主視覺容器內的所有html元素都是fixed定位,導致主視覺容器內沒有任何子物件撐開它的高度,需補上高度設定。
  • 將【下方內容】設定幾千像素的高度,以便觀察fixed的效果。

此時畫面應是各圖疊在一起,如下圖。並且捲動時會跟隨視窗。

4. 設定滾動視差

目標:在fixed跟隨視窗的基礎上,再根據捲軸滾動,讓各圖有不等量的偏移

  • 配好各圖層的移動速度值
  • JS設定:視窗捲動事件發生時,偏移圖層位置

此時可以執行網頁,捲動看看視差效果,示意圖如下

5. 處理上方空洞

  • 上方的內容也設fixed,尤其若是導覽列就很常這樣設定。
  • 解法二:(本Lab使用)做一個背景打底,和主視覺的遠景色一致。此背景的定位設定為absolute而非fixed跟隨。

A.html的調整:

B.CSS的調整

C. JS的調整

6. 下方漏餡

本來以為在主視覺容器設個 overflow:hidden; 即可解決,結果未能如願。
就把所有圖層的z-index設為-1吧,到深處去! 缺點是網頁所有的下方內容都需要有背景色設定,不可以是透明的,避免漏餡。

SCSS的調整:

7. 調整成美觀的版面

確認都運作正常,再調整成滿版畫面,讓人感受視覺的衝擊?
(由於畫面有變化,視差的基數可再自行決定是否要調整)

再來可將下方內容設計成主視覺的”延伸背景”感覺:

加一堆假文,延伸背景的概念效果大致如下:


Lab就到這裡,希望有所助益!

洪偉軒
洪偉軒

BuildSchool的軟體工程師&培訓助教