网页设计中的多层视差滚动效果 (Parallax scrolling)

0

parallax scrolling

观察上面的图片,里面有三张图片,分别放置于不同阶层,如此可以构成一幅具有简单景深的画面。假设我们将三张图作成由右向左卷动的动画,但背景图片动得比较慢,前景图片动得比较快,我们就可以感受到较符合生活经验的景深效果。

parallax_scrolling

这种效果称为视差滚动(Parallax scrolling),它是电脑图学中一种特别的滑动特效技巧,首次出现于1982年一款叫Moon Patrol的游戏,主要是用来摸拟3D效果。滚动视差的原理是把背景图片的移动速度放慢,让前景图片移动较快,因而在2D画面上产生多层次的布景深度。

把滚动视差应用在网页设计上,也具有非常棒的视觉效果,而且只要使用jQuery外挂搭配CSS设定就可以帮助我们快速制作出含有滚动视差效果的网页了,非常方便。

「横向滚动」的实例:
http://www.indofolio.com/

这边则是WDL整理的21个具有Parallax Scrolling效果的网站:
http://webdesignledger.com/21-examples-of-parallax-scrolling-in-web-design

参考资料:
维基百科 – Parallax scrolling
Scrolling Parallax Plugin for jQuery 官网
MRMU

发表评论

您的邮箱不会公开,当您的评论有新的回复时,会通过您填写的邮箱向您发送评论内容。 必填字段 *

为何看不到我发布的评论?

正在提交, 请稍候...