來自Nike Better World的視差滾動(Parallax Scrolling)特效 ...

日期：2011/11/03  來源：Queness  編譯：GBin1.com

介紹

視差滾動特效(parallax scrolling)是web開發目前比較火的一個小技巧，咱們須要特別感謝Nike Better World帶給咱們的這個超酷的設計。 它帶給web設計和開發很大的反響。幾乎每一個人都在討論。我對於這個創新的特效也很是的欣賞。這個技巧綜合了大圖片，滾動，數字計算等技巧，爲了可以精確的計算合適的位置和時機來展現這種視差效果。

固然這個特效的使用也須要權衡， 在研究這個特效的過程當中，我也看到了不少失敗的案例。總體的性能即便在最新的瀏覽器和主機上的運行也很是拖沓。其次，設計上的關聯有時候也須要很是嚴密的計劃，有些實現讓咱們以爲很是困惑，甚至讓你有些噁心。

如何實現視差滾動 parallax scrolling

這裏有倆個很是好的教程，能夠一步一步幫助你們實現一個parallax scrolling的特效，但願你們可以喜歡：

Behind the scenes of Nike Better World

這個是來自Smashing雜誌的教程，教你如何一步一步實現Nike better world的特效。

One Page Website

另一個教程來自Web Design Shock。對於視覺設計者來講特別有用。

更多的例子

如下咱們列出了一系列使用視差滾動效果的網站，但願帶給你靈感。其實有些沒有使用視差效果，可是我以爲他們也值得你們研究滾動特效。

Sony Tablet

Lipton Ice Team

Manufacture d‘essai

Lutopi

Mohanbalaji

Vertaa verkkoja

Ben the body guard

Mark Lawrence Design

Unfold

Bunkai Kei

Beer Camp

這不是一個視差滾動，可是很是有趣的會縮放每一個頁面

Buero Buero

RapidBoot

Reverenddanger

這也不是一個視差滾動，當你滾動時，它會觸發每個動畫

Netlash

AP-O

Cantilever Chippy

Beautiful Explorer

JanPloch

這個不是視差滾動特效，不過很聰明的使用PNG文件堆積生成頗有吸引力的動畫效果

Unfinished Business

原文來自： 來自Nike Better World的視差滾動(Parallax Scrolling)特效 - 分享一些教程和靈感