来自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)特效 - 分享一些教程和灵感