你沒見過吧,這些網頁做出了超炫的裸眼3D效果

網頁設計 設計師 鼠標 Vi 秒秒學 2017-05-17

我們平時看到的網頁一般都是二維的,即便設計得再漂亮看起來也只是平面效果。但國外一些設計師居然在網頁上就實現了3D效果,而且這種“3D”不需要戴眼睛或者頭盔等其他器械,完全是利用了人眼的三維視差效果,打造出的裸眼也能看到的“立體畫面”。

你也想見識一下嗎?別急,秒秒學(www.miaomiaoxue.com)小編就為你搜羅彙集到了下面,讓你慢慢欣賞,尤其是設計師朋友們,希望對你們有所啟發。

1、Plastic Studio(http://www.plasticbcn.com/)你沒見過吧,這些網頁做出了超炫的裸眼3D效果

這個令人驚歎的網站提供全景3D視覺,在整個網站上完全體現用戶第一的體驗。每個新屏幕都具有圖像,文本和鏈接,每個內容版塊都具備一定程度的景深效果。

2、Skuawk Photos(http://skuawk.com/)你沒見過吧,這些網頁做出了超炫的裸眼3D效果

持著相機的巨幅主題形象在暗色的背景下,前後來回地移動,營造出了立體化的效果。更有趣的是,設計師是通過將圖片分割成許多圖層來突出3D效果的。

3、New Action(http://newacton.com.au/)你沒見過吧,這些網頁做出了超炫的裸眼3D效果

這裡乍一看起來像一個靜態網站,但每個插圖都與右側導航欄中的分類有關。當你的鼠標懸停在任意一個元素上時,你就會看到插圖顏色發生了變化,並在不停運動。如果你單擊某個元素,則會出現彈起的動畫,以便用戶可以更詳細地看到插圖以及它的運動——這是一種沉浸式的3D體驗,通過這種方式,用戶的好奇心被調動,他們會不由自主地深入瞭解網站內容。

4、Hello Monday(http://hellomonday.com/)你沒見過吧,這些網頁做出了超炫的裸眼3D效果

在這個頁面上每一次鼠標滑動都會為畫面帶來變化。在設計上,設計師使用了多種動態效果,而且所有的連接都具有通用的佈局和相同的3D視差效果,就像VI設計一樣,統一了風格,更加有利於網站的辨識與記憶。

5、Digital Hands(http://www.digitalhands.net/)你沒見過吧,這些網頁做出了超炫的裸眼3D效果

該網站採用的3D效果簡單明瞭。跟隨鼠標的移動,噴濺的液體圍繞女孩移動,這樣有趣的效果吸引用戶進行點擊。同時,溫馨甜蜜的色彩和半裸的造型也加強了吸引力。

6、Galaxia(https://www.galaxia.co/)你沒見過吧,這些網頁做出了超炫的裸眼3D效果

在這個網頁上,鼠標的懸停和點擊都會造成背景中星星的浮動。如果你單擊並滾動,又會翻開下一個網頁,你就會看到另一個網頁呈現出不同的3D效果,讓人驚歎不已。

7、Toi(https://toi.io/)你沒見過吧,這些網頁做出了超炫的裸眼3D效果

大膽簡潔的排版本身就很有格調,再加上3D視差效果和對比色彩配色,很好心意了用戶的注意力。這個網頁設計告訴我們,要做出吸引人的網頁,其實不用太複雜,有時候簡單就是美。

8、Vineeth & Kavya(http://www.twostates.in/)你沒見過吧,這些網頁做出了超炫的裸眼3D效果

這是我見過的最酷的婚禮網站之一。不但將照片處理成繪畫般的效果增強藝術性,還採用3D視差突出了重點,同時大量的留白讓網站顯得很大氣,很有逼格。

9、Ego Pop(http://www.egopop.net/)你沒見過吧,這些網頁做出了超炫的裸眼3D效果

使用3D視差效果不但可以做的很酷,也可以做得很有童趣很好玩。這個網頁就純粹是為了博得用戶(尤其是小朋友)喜歡而設計的,有些地方甚至不能點擊,只是簡單的使用視差營造3D效果,但仍然非常引人注意。

10、Webydo (http://3d-parallax.webydo.com/)你沒見過吧,這些網頁做出了超炫的裸眼3D效果

Webydo的登陸頁面使用了無代碼3D視差動畫,實際上這也是它的宣傳手段之一。它通過自身網站的設計,告訴別人使用不同的方式和應用程序造成的不同效果,這也是一種直觀的“言傳身教”了。

看了這些網頁你是不是也很想自己試下呢?別怕自己沒基礎,秒秒學以下教程,讓0基礎也能輕鬆入門:

《Photoshop CC 網頁設計基礎》

http://www.miaomiaoxue.com/show/bookshow/aabe88fc567c8e540156afd0e0e12990.html?tt

《AI網頁設計基礎》

http://www.miaomiaoxue.com/show/bookshow/aabe88f84f01896e014f16a0ce64127f.html?tt

相關推薦

推薦中...