立体动感的视差滚动效果网页

视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。作为今年网页设计的热点趋势,越来越多的网站应用了这项技术。
这让我联想到了我初学CSS的时候关注的一个网站css Zen Garden (禅意花园)。设计者们丰富的想象力把同样结构的网页设计成一个个精美的作品。而今天我要介绍的视差滚动效果网页犹如当年的禅意花园,当然内容是不一样的,还可以使用js脚本语言,页面表现力更为丰富。
首先来看看几个优秀的例子:
Head 2 Heart

Saucony Kinvara 3

Intacto 10 Years

Ok Studios

人人网V6新版抢鲜体验

我找了一个比较酷的网站提取了带有这种效果的代码,分享给大家,其实原理很简单,滚屏控制背景位置而已。使用jquery的动画函数将会使代码更简单。

点此查看具体效果

2 Comments

  1. 愤怒的小鸟太空版官方网站也是这样,但是它是横向,纵向斜向都能运动

    回复回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注