来自Nike Better World的视差滚动(Parallax Scrolling)特效 - 分享一些教程和灵感

介绍

视差滚动特效(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