果你常在逛國外網站，最近你會發現最近流行一種超炫的網頁設計，一點開網站你會發現首頁長到不可思議，用滑鼠滾下去，哇阿!整個頁面像活了起來，他就是利用不同圖層造成立體感；隨著不同速度移動頁面有立體運動的效果，這就叫做視差滾動!
視差滾動（Parallax Scrolling）是指讓通過鼠標實現網頁多層背景以不同的速度移動，從而形成立體的運動效果，帶來非常出色的視覺和交互體驗。作為近年來網頁設計的熱點趨勢，越來越多的網站應用了這項技術，尤其是國外網站居多。這種網站通常通過鼠標滾輪滾動來實現，用超酷的視覺體驗來取代枯燥的頁面滾動，從而“吸引”用戶走向自己的目標。
視差滾動網站範例-以下提供了三個網頁設計範例供大家參考
相當具有動態故事性質的網站
具有較多特殊特效的網站
較具有故事性質的網站
視差滾動網站的技術使用
其實製作一個視差滾動網站並不會相當的難，比較困難的地方是”設計想法”及”內容”，最基本所使用到的語法技術為：HTML5、CSS3以及jQuery
視差滾動網站的應用
視差滾動的網站普遍應用在比較具有”故事性”以及“活動性”的網站上；其中又以”故事性”質的網站來的最有效益。因為透過類似故事講解呈現的方式，來串接所有的內容，讓瀏覽者能清楚並快速的知道表達者想表達的內容。
視差滾動網站的優點及缺點
優點：承上述，透過講故事的方式，利用特效的展現易於讓瀏覽者串接所有網站內容，較具有活動性質的網站上。
缺點：因為使用的是CSS3以及HTML5，所以跨瀏覽器支援度可能會出現問題（例如IE6、IE7）。且目前無法使用在黑快馬系統上。
網頁設計真的是不斷有新東西出來，就算是使用已知的技術互相搭配也可以撞出強大火花，跟國外網頁設計相比，台灣近幾年的設計也走得越來越有質感，期待將視差滾動技術真正應用在台灣網站上的一天~
設計師Jerry分享
沒有留言:
張貼留言