介紹

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

當然這個特效的使用也需要權衡， 在研究這個特效的過程中，我也看到了很多失敗的案例。整體的性能即使在最新的瀏覽器和主機上的運行也非常拖沓。其次，設計上的關聯有時候也需要非常嚴密的計劃，有些實現讓我們覺得非常困惑，甚至讓你有些惡心。Via Gbin1

如何實現視差滾動 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