2013
12
09

視差滾動(Parallax Scrolling)網頁動畫效果

關鍵字:HTML5CSS3網頁設計

近年來網頁技術發達,我們經常可以在許多網站上看見非flash所製作的新奇的動畫效果。也因為網頁技術的發達與傳遞的快速,大部分的使用者都知道HTML5與CSS3,也造成許多使用者誤會這些動畫是用HTML5所製作的,其實並不是唷!最常看見的應該是接下來要介紹的動畫效果:Parallax Scrolling 視差滾動。

視差滾動(Parallax Scrolling)是利用許多分層讓通過鼠標實現網頁多層背景,以不同的速度移動,而形成立體的運動效果,帶來非常出色的視覺體驗和享受。利用這樣的技術來取代枯燥乏味的閱讀,增加頁面的活潑度,吸引使用者走向自己的目標。

目前這種視差滾動效果被越來越多的國外網站所應用, 成為近年網頁設計的熱點趨勢。以下提供幾個各種不同風格的網站來觀賞:

Firefox:
https://firefox.club.tw/campaign/every-moment/

此宣傳網頁是MIT的唷!

電影:少年PI
http://journey.lifeofpimovie.com/#!/


Head2Heart
http://www.head2heart.us/


OK Studios
http://www.ok-studios.de/home/


Piccsy Playground
http://www.piccsy.com/everything-design/


Angry Birds Space
http://space.angrybirds.com/launch/


学校法人岩澤学園みほ幼稚園 ~神奈川県横浜市の幼稚園~
http://miho-youchien.com/


d'Angelico Guitars
http://dangelicoguitars.com/


I to Sie Ceni
http://www.itosieceni.pl/


Google 聖誕老人追蹤器
http://www.google.com/santatracker/

傑立資訊傑立資訊事業有限公司

電話:(02)2739-9096 | 傳真:(02)2739-6637 | 客服:service@julyinfo.com | 臺北市大安區和平東路3段257號6樓map

© 2016 傑立資訊 All rights reserved.法律顧問:宇恒法律事務所