当前位置: 代码迷 >> Web前端 >> 来源于Nike Better World的视差滚动(Parallax Scrolling)特效 - 分享一些教程和灵感
  详细解决方案

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

热度:419   发布时间:2012-08-28 12:37:01.0
来自Nike Better World的视差滚动(Parallax Scrolling)特效 - 分享一些教程和灵感

日期:2011/11/03? 来源:Queness? 编译:GBin1.com

介绍

视差滚动特效(parallax scrolling)是web开发目前比较火的一个小技巧,我们需要特别感谢Nike Better World带给我们的这个超酷的设计。 它带给web设计和开发很大的反响。几乎每个人都在讨论。我对于这个创新的特效也非常的欣赏。这个技巧综合了大图片,滚动,数字计算等技巧,为了能够精确的计算合适的位置和时机来展示这种视差效果。

当然这个特效的使用也需要权衡, 在研究这个特效的过程中,我也看到了很多失败的案例。整体的性能即使在最新的浏览器和主机上的运行也非常拖沓。其次,设计上的关联有时候也需要非常严密的计划,有些实现让我们觉得非常困惑,甚至让你有些恶心。

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

如何实现视差滚动 parallax scrolling

这里有俩个非常好的教程,可以一步一步帮助大家实现一个parallax scrolling的特效,希望大家能够喜欢:

Behind the scenes of Nike Better World

这个是来自Smashing杂志的教程,教你如何一步一步实现Nike better world的特效。

One Page Website

另外一个教程来自Web Design Shock。对于视觉设计者来说特别有用。

更多的例子

以下我们列出了一系列使用视差滚动效果的网站,希望带给你灵感。其实有些没有使用视差效果,但是我觉得他们也值得大家研究滚动特效。

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

  相关解决方案