網頁版面設計 – 視差捲動 (PARALLAX SCROLLING) 網頁設計展示

什麼是視差捲動?

視差效果(parallax effect)在這一兩年來的網頁設計中,被廣泛的被使用到,他在滑鼠滾動時透過背景不同移動速度,造成了令人驚豔的效果,給訪客有趣的瀏覽體驗。今天來介紹一下幾個使用這個效果很棒的網站給大家。

視差捲動設計

1. Nathan Sawaya積木夢工場|官方網站|積木展

website-layout-design-parallax-scrolling-2023-06-16-16-04-44

http://www.brickart.tw/

2. Saucony Kinvara 3

website-layout-design-parallax-scrolling-2023-06-16-16-06-15

http://community.saucony.com/kinvara3/

3. Air Jordan 2012 – AJ2012

website-layout-design-parallax-scrolling-2023-06-16-16-07-57

http://community.saucony.com/kinvara3/

4. Lois Jeans 50th Anniversary | Spring Summer 2012

website-layout-design-parallax-scrolling-2023-06-16-16-09-16

http://www.loisjeans.com/web2012/es/

5. Michelberger Booze

website-layout-design-parallax-scrolling-2023-06-16-16-11-49

http://www.michelbergerbooze.com/

6. TAG REACTION | RECRUIT 採用サイト | Tokyu Agency Inc.

website-layout-design-parallax-scrolling-2023-06-16-16-12-22

http://www.tokyu-agc.co.jp/recruit/2013/special/

7. Ascensión Latorre

website-layout-design-parallax-scrolling-2023-06-16-16-12-58

http://www.ascensionlatorre.com/es/philosophy/

8. TokioLab! Realizzazione Siti Web Milano

website-layout-design-parallax-scrolling-2023-06-16-16-13-33

http://www.tokiolab.it/

9. KRYSTALRAE

website-layout-design-parallax-scrolling-2023-06-16-16-14-06

http://krystalrae.com/#collection/

10. inTacto 10 Years

website-layout-design-parallax-scrolling-2023-06-16-16-14-41

http://www.intacto10years.com/index_start.php/

11. Head2Heart

website-layout-design-parallax-scrolling-2023-06-16-16-15-13

http://www.head2heart.us/

12. Manufacture d’Essai

website-layout-design-parallax-scrolling-2023-06-16-16-18-26

http://www.manufacturedessai.it/it/

13. iutopi

website-layout-design-parallax-scrolling-2023-06-16-16-18-57

http://www.iutopi.com/

附註:視差效果(parallax)這個詞是源自於希臘παράλλαξις(parallaxis),意思是“變化”。

資料來源:30 great websites with parallax scrolling | Awwwards

Jerous

跨領域跨到劈腿,網站前端的路途,一路向前。前擋設計,後攻工程。

想知道更多嗎?

填入常用的電子郵件,即可在第一時間獲取最新知識!

Subscription Form