《滾》厲害的網站表現法

Heko
UniMarket
Published in
5 min readAug 31, 2020

--

《滾動視差》(Parallax Scrolling)的表現法其實在2013年就開始風靡在網站設計裡,但網頁技術一年一年的越來越強大,想當然的《滾動視差》的表現法也就理所當然的有了更進一步的使用法,以下就介紹幾個我認為《滾》的很厲害的網站。

七點半的太空人

這是一個13年的動畫作品網站,但是就算是放到現今(2020)來看依然是表現的很精緻,運用動畫中的主人翁穿梭在網頁的每一塊內容中來達到引導瀏覽的作用,把直立式的滾動效果運用的很恰當。

KITAMURA MAKURA

這是一個始建於1923年的枕頭製造商KITAMURA MAKURA的官方網站。2020的作品,運用直立式的滾動,加上前後物件速差的表現手法,是中規中矩的滾動視差表現法,但是網站設計的精緻度非常高,把古色古香的風格加上滾動效果搭配的舒適。

Firewatch

這是遊戲 Firewatch 公司製作相當完美的視差滾動網站,他們透過六張圖層位移效果創造這幅驚人的層次感。只有上半部運用滾動效果,滾動後內容以靜態頁面顯示。

Garden Studio

Garden Studio與Firewatch這兩個網站的表現手法有點類似,都是上半部運用前後景速差的方式達到視差,然後接續到靜態的內容,讓使用者依然可以輕鬆的閱讀網頁上的內容資訊,算是點綴性的使用滾動視差效果。

New York Times : Tomato Can Blues

運用漫畫風格及說故事的方式,把文字結合滾動視差漫畫的表現手法完美融合,可以說是一個偉大的閱讀體驗。

The Boat

The Boa是一本關於越戰後越獄的互動小說。根據Nam Le的故事,由Matt Huynh改編。總共分為六個章節,以漫畫式的滾動視差形式演示不同的情節,而這種移動視差也有利於使使用者沉浸在故事中。

Hobolobo

Hobolobo採用的是水平方向的視差滾動效果,與其它網站不同,Hobolobo更適用於觸摸設備,當你滑動觸摸屏時,頁面就會從左到右移動,用話劇的表現手法呈現頁面的內容。這個網站完全採用手繪形式,最令人驚艷的地方就是它的3D視差效果。

Misato town

2019年的作品,把滾動視差運用在前進畫面上,有點類似google地圖效果,手繪風格設計得很精緻。

Moooi — A Life Extraordinary

2020年的設計作品,也是一個把滾動視差運用在前進畫面上的設計作品,效果非常炫麗。真要說缺點的話大概就是因為實在太炫麗了,使得流暢度有點不夠,操作上有一點點卡卡的。

Creative Cruise

也是一個把滾動視差運用在前進畫面上的設計作品,不過旋轉效果不只滾得很厲害,還滾得很暈。

Gucci

運用橫向滾動視差的設計作品,牆壁的掛畫加上滾動視差的表現手法來介紹產品,其中的特點是加上了畫面與滑鼠位置的反饋。

Stone and Style

運用中間的石頭圖形加上滑鼠滾動做出反饋的動畫,再加上前後景的速差營造出空間感,也有運用滑鼠位置得到聚光燈照在石頭上的反饋。

Dogstudio. Multidisciplinary Creative Studio.

也是運用背景的狼圖形加上滑鼠滾動做出反饋的動畫的一個設計作品,不過這個作品沒有前後景的速差,所以空間感比較薄弱。

Rand

背景的變形蟲效果加上滑鼠滾動做出反饋的效果,整個網站流暢度很高,效能處理得很好,不只滾得厲害,code寫的更厲害。

HOPE

2020全球的大事件《COVID-19》,這個作品是Black Rainbow創建的一項沉浸式視聽實驗,目的是在這些困難時期為社會帶來希望。

其實最後這一個作品我也不確定算不算是滾動視差的表現手法,這個作品是一個在背景撥放的影片,然後運用滑鼠滾動的效果來控制時間軸的播放。

--

--