• Brian Chien

什麼是視差滾動效果(Parallax Scrolling)?帶你看10個最佳應用的網站



視差滾動效果(Parallax Scrolling)是一項網站設計技術,追溯到2011年Wix首次發表這項新功能。

利用背景移動比前景慢的速度,造成視覺上的視差,產生類似3D的效果,增加使用者的感受度並有身臨其境的效果。即使經過這麼多年,Parallax Scrolling視差滾動效果依然還是我們設計師不可或缺的一門壓箱寶。


視差其實是一種錯覺,因為人眼感知的物體,往往會比實際物體離我們的距離較大。以前這種做法,是用於不同介質的視差,進而產生逼真的效果,例如迪士尼的動畫還是一些早期的電玩遊戲,但隨著CSS和HTML的進步,現在也可用於網路世界。


以下是10個利用Parallax Scrolling視差滾動效果的傑出網站,給大家參考。


01. Mild Design


Emilie De Grosbois是蒙特利爾的視覺藝術家,她用一系列錯綜複雜的全螢幕長捲軸圖像。圖片接軌的表現增加了深度感,如同她的作品一般。


02. OFFF Tel Aviv


OFFF創意節成立於2001年,是西班牙最知名的創意節日之一, 起源於西班牙巴塞隆納,多年來簽約多個城市,在紐約、墨西哥城和特拉維夫等地方推廣。而約拉維夫的網站非常吸睛活潑,除了視差更加上影片的效果,左右對稱的排列,會讓你覺得很有活力。


03. Chris Covert


這是航太工程師Chris Covert的個人履歷網站,Chris在螢幕中間放置了一個履歷頁面和一張名片,停留在背景再配合視差滾動,很創新又驚豔。


04. Ivy Chen


這個在之前的文章有介紹過,台灣人在紐約的設計師,她的網站像是在變魔術一般。


05. Industrial Jewellery


這是一個標準的多層滾動效果,中間的模特兒刻意做長時間的停留,以配合四週不斷變化滾動的效果。


06. Inky Blue Animal Rescue


這個網站相對前幾個來說,較為中規中舉,但寵物就是要看起來可愛,靜態的呈現是最適合的。


07. Karlie Kloss


這是美國超模Karlie Kloss的個人網站,設計風格簡約優雅,搭配視差和影片素材製造律動感。


08. Hana Knizova


Hana Knizova的攝影網站用了很多長捲的照片,有著不少裸露但又不帶情色感,讓人增添個性的感覺。


09. Hotel Vale das Nuvens


這間巴西的飯店網站,設計的風格很舒適平滑,簡單的5~6張全景的視差滾動排列,就可以構成一個好看的首頁。


10. Frankie Ratford


Frankie Ratford是平面及數位設計師,她的網站表達了她的性格,生活且活潑,擅於用色的設計師專長被表達的一覽無遺。


  • Facebook - White Circle
  • Instagram - White Circle
  • LinkedIn - White Circle

© 2019 Brian Chien