什麼是視差捲動?
視差效果(parallax effect)在這一兩年來的網頁設計中,被廣泛的被使用到,他在滑鼠滾動時透過背景不同移動速度,造成了令人驚豔的效果,給訪客有趣的瀏覽體驗。今天來介紹一下幾個使用這個效果很棒的網站給大家。
視差捲動設計
1. Nathan Sawaya積木夢工場|官方網站|積木展
![網頁版面設計 - 視差捲動 (PARALLAX SCROLLING) 網頁設計展示 2 website-layout-design-parallax-scrolling-2023-06-16-16-04-44](https://raw.githubusercontent.com/tellustek/tellustek-official-image/main/website-layout-design-parallax-scrolling-2023-06-16-16-04-44.png)
2. Saucony Kinvara 3
![網頁版面設計 - 視差捲動 (PARALLAX SCROLLING) 網頁設計展示 3 website-layout-design-parallax-scrolling-2023-06-16-16-06-15](https://raw.githubusercontent.com/tellustek/tellustek-official-image/main/website-layout-design-parallax-scrolling-2023-06-16-16-06-15.png)
http://community.saucony.com/kinvara3/
3. Air Jordan 2012 – AJ2012
![網頁版面設計 - 視差捲動 (PARALLAX SCROLLING) 網頁設計展示 4 website-layout-design-parallax-scrolling-2023-06-16-16-07-57](https://raw.githubusercontent.com/tellustek/tellustek-official-image/main/website-layout-design-parallax-scrolling-2023-06-16-16-07-57.png)
http://community.saucony.com/kinvara3/
4. Lois Jeans 50th Anniversary | Spring Summer 2012
![網頁版面設計 - 視差捲動 (PARALLAX SCROLLING) 網頁設計展示 5 website-layout-design-parallax-scrolling-2023-06-16-16-09-16](https://raw.githubusercontent.com/tellustek/tellustek-official-image/main/website-layout-design-parallax-scrolling-2023-06-16-16-09-16.png)
http://www.loisjeans.com/web2012/es/
5. Michelberger Booze
![網頁版面設計 - 視差捲動 (PARALLAX SCROLLING) 網頁設計展示 6 website-layout-design-parallax-scrolling-2023-06-16-16-11-49](https://raw.githubusercontent.com/tellustek/tellustek-official-image/main/website-layout-design-parallax-scrolling-2023-06-16-16-11-49.png)
http://www.michelbergerbooze.com/
6. TAG REACTION | RECRUIT 採用サイト | Tokyu Agency Inc.
![網頁版面設計 - 視差捲動 (PARALLAX SCROLLING) 網頁設計展示 7 website-layout-design-parallax-scrolling-2023-06-16-16-12-22](https://raw.githubusercontent.com/tellustek/tellustek-official-image/main/website-layout-design-parallax-scrolling-2023-06-16-16-12-22.png)
http://www.tokyu-agc.co.jp/recruit/2013/special/
7. Ascensión Latorre
![網頁版面設計 - 視差捲動 (PARALLAX SCROLLING) 網頁設計展示 8 website-layout-design-parallax-scrolling-2023-06-16-16-12-58](https://raw.githubusercontent.com/tellustek/tellustek-official-image/main/website-layout-design-parallax-scrolling-2023-06-16-16-12-58.png)
http://www.ascensionlatorre.com/es/philosophy/
8. TokioLab! Realizzazione Siti Web Milano
![網頁版面設計 - 視差捲動 (PARALLAX SCROLLING) 網頁設計展示 9 website-layout-design-parallax-scrolling-2023-06-16-16-13-33](https://raw.githubusercontent.com/tellustek/tellustek-official-image/main/website-layout-design-parallax-scrolling-2023-06-16-16-13-33.png)
9. KRYSTALRAE
![網頁版面設計 - 視差捲動 (PARALLAX SCROLLING) 網頁設計展示 10 website-layout-design-parallax-scrolling-2023-06-16-16-14-06](https://raw.githubusercontent.com/tellustek/tellustek-official-image/main/website-layout-design-parallax-scrolling-2023-06-16-16-14-06.png)
http://krystalrae.com/#collection/
10. inTacto 10 Years
![網頁版面設計 - 視差捲動 (PARALLAX SCROLLING) 網頁設計展示 11 website-layout-design-parallax-scrolling-2023-06-16-16-14-41](https://raw.githubusercontent.com/tellustek/tellustek-official-image/main/website-layout-design-parallax-scrolling-2023-06-16-16-14-41.png)
http://www.intacto10years.com/index_start.php/
11. Head2Heart
![網頁版面設計 - 視差捲動 (PARALLAX SCROLLING) 網頁設計展示 12 website-layout-design-parallax-scrolling-2023-06-16-16-15-13](https://raw.githubusercontent.com/tellustek/tellustek-official-image/main/website-layout-design-parallax-scrolling-2023-06-16-16-15-13.png)
12. Manufacture d’Essai
![網頁版面設計 - 視差捲動 (PARALLAX SCROLLING) 網頁設計展示 13 website-layout-design-parallax-scrolling-2023-06-16-16-18-26](https://raw.githubusercontent.com/tellustek/tellustek-official-image/main/website-layout-design-parallax-scrolling-2023-06-16-16-18-26.png)
http://www.manufacturedessai.it/it/
13. iutopi
![網頁版面設計 - 視差捲動 (PARALLAX SCROLLING) 網頁設計展示 14 website-layout-design-parallax-scrolling-2023-06-16-16-18-57](https://raw.githubusercontent.com/tellustek/tellustek-official-image/main/website-layout-design-parallax-scrolling-2023-06-16-16-18-57.png)
附註:視差效果(parallax)這個詞是源自於希臘παράλλαξις(parallaxis),意思是“變化”。