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

日期:2011/11/03  來源:Queness  編譯:GBin1.comjavascript

介紹

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

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

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

如何實現視差滾動 parallax scrolling

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

Behind the scenes of Nike Better Worldweb

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

One Page Website瀏覽器

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

更多的例子

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

Sony Tablet

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

Lipton Ice Team

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

Manufacture d‘essai

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

Lutopi

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

Mohanbalaji

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

Vertaa verkkoja

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

Ben the body guard

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

Mark Lawrence Design

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

Unfold

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

Bunkai Kei

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

Beer Camp

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

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

Buero Buero

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

RapidBoot

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

Reverenddanger

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

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

Netlash

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

AP-O

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

Cantilever Chippy

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

Beautiful Explorer

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

JanPloch

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

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

Unfinished Business

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

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

相關文章
相關標籤/搜索