簡介
不知道什麼是滾動視差? 貼幾個網站給你瞧瞧：
- 橫著滾
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就到這裡，希望有所助益!
