簡介
不知道什麼是滾動視差? 貼幾個網站給你瞧瞧:
- 橫著滾
http://hobolobo.net/ - 無限滾
https://www.creativecruise.nl/ - 立體滾
https://dogstudio.co/
https://www.town.shimane-misato.lg.jp/misatoto/ - 製造風雨飄搖的感覺
https://www.sbs.com.au/theboat/
還有一些特別的:
- 導覽參觀的感覺
https://www.moooi.com/en/a-life-extraordinary#double-bubble
https://marmont.gucci.com/ - 控制影片播放速度http://blackrainbow.la/hope/https://www.firewatchgame.com/
總之,先思考近遠景,設計各層適合的圖,讓圖層重疊著後,以不同的速度移動,近景移動速度快,遠景移動速度慢。
本文接下來借用firewatch網站的圖檔,也參考此篇文章,做個實作Lab
Lab
0. 準備工作
先將firewatch網站主視覺用到的九張圖抓下來
- 建立html檔 ( 不妨命名為ParallaxLab.html )
- 先CSS Reset,並開一個SCSS檔 ( 不妨命名為ParallaxLab.scss ),在html檔中引入其css連結

1. 建立html結構

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

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

- 先讓各圖層以fixed方式定位
- 圖層設定fixed後,div自動寬度100%的特性消失,須補寬度設定。
- 主視覺容器內的所有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就到這裡,希望有所助益!