2013年4月2日 星期二

視差滾動網站 Parallax Scrolling Web


      喔喔小編我呀~ 最近又發現了一個超~~有設計感的網站喔~

 待會看下去!!小編包你驚訝連連~真的是好佩服外國人的創意喔….希望小編有一天也可以像他們一樣設計出這個有特色的網站來~
   首先今天先讓大家知道一下什麼是視差滾動,這算是這一兩年開始有的東西~只是國外比較普遍一點,各個網頁藉著視差滾動的方式增加網友們瀏覽時的新鮮感,很讚的一個發明~^^
 好啦~ 小編不多說,交給我們專業的設計Jerry先生來告訴大家吧~

什麼是視差滾動?
視差滾動(Parallax Scrolling)是指讓通過鼠標實現網頁多層背景以不同的速度移動,從而形成立體的運動效果,帶來非常出色的視覺和交互體驗。
作為近年來網頁設計的熱點趨勢,越來越多的網站應用了這項技術,尤其是國外網站居多。這種網站通常通過鼠標滾輪滾動來實現,用超酷的視覺體驗來取代枯燥的頁面滾動,從而“吸引”用戶走向自己的目標。

視差滾動網站範例
以下提供了三個範例供大家參考

相當具有動態故事性質的網站



具有較多特殊特效的網站



較具有故事性質的網站

視差滾動網站的技術使用
其實製作一個視差滾動網站並不會相當的難,比較困難的地方是”設計想法”及”內容”,最基本所使用到的語法技術為:HTML5CSS3以及jQuery

視差滾動網站的應用
視差滾動的網站普遍應用在比較具有”故事性”以及“活動性”的網站上;其中又以”故事性”質的網站來的最有效益。因為透過類似故事講解呈現的方式,來串接所有的內容,讓瀏覽者能清楚並快速的知道表達者想表達的內容。

視差滾動網站的優點及缺點
優點:承上述,透過講故事的方式,利用特效的展現易於讓瀏覽者串接所有網站內容,較具有活動性質的網站上。
缺點:因為使用的是CSS3以及HTML5,所以跨瀏覽器支援度可能會出現問題(例如IE6IE7)。且目前無法使用在黑快馬系統上。

大家看完有沒有很佩服這個名叫視差滾動的網頁呈現方式呢~

聽設計師說網路上都可以下載一些相關的套件喔有興趣的專業人士快去設計一些會讓人眼睛為之一亮的好作品吧^^

分享Jerry



沒有留言:

張貼留言