爱客仕-前端团队博客园

浅谈视差滚动(parallaxScrolling)

发表于 |

视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为今年网页设计的热点趋势，越来越多的网站应用了这项技术。

视差滚动

视差效果，原本是一个天文学术语，当我们观察星空时，离我们远的星星移动速度较慢，离我们近的星星移动速度则较快。当我们坐在车上向车窗外看时，也会有这样的感觉，远处的群山似乎没有在动，而近处的稻田却在飞速掠过。许多游戏中都使用视差效果来增加场景的立体感。说的简单点就是网页内的元素在滚动屏幕时发生的位置的变化，然而各个不同的元素位置变化的速度不同，导致网页内的元素有层次错落的错觉，这和我们人体的眼球效果很像。我看到多家产品商用视差滚动效果来展示产品，从不同的空间角度和用户体验，起到了非常不错的效果。

目前这种视差滚动效果被越来越多的国外网站所应用， 成为网页设计的热点趋势。

通过一个很长的网页页面，其中利用一些令人惊叹的插图和图形，并使用视差滚动（Parallax Scrolling）效果，让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。

视差滚动效果的主要特点

  1. 直观的设计，快速的响应速度，更合适运用于单页面。
  2. 差异滚动 分层视差
    页面上很多的元素在相互独立地滚动着，如果我们来对其它分层的话，可以有两到三层 ：背景层，内容层，贴图层。
  3. 差异滚动的实现规则：
    • 背景层的滚动 (最慢)
    • 贴图层(内容层和背景层之间的元素)的滚动 (次慢)
    • 内容层的滚动 (可以和页面的滚动速度一致)

三个图层的滚动速度不一致，就做出了漂亮的差异滚动效果

下面主要介绍视差滚动插件skrollr的使用

skrollr

skrollr 0.6.30的js库支持移动端（Andriod,ios）和PC端，大小仅12K。

设计友好，不需要知晓过多的js技巧，只需要清楚CSS和HTML。

skrollr使用

正确引入skrollr.min.js，调用skrollr.init()函数来初始化skrollr

1
2
3
4
5
<script type="text/javascript" src="skrollr.min.js"></script>
    <script type="text/javascript">
    var s = skrollr.init();
    </script>
</body>

for example

  1. 改变一个背景色div的起始值#00f时，当用户向下滑动500像素，逐渐改变div的背景颜色从#00f到#f00
    1
    <div data-0="background-color:rgb(0,0,255);" data-500="background-color:rgb(255,0,0);">WOOOT</div>

查看DEMO

  1. 在1例子的基础上增加背景滚动效果
1
<div data-0="background-color:rgb(0,0,255);transform:rotate(0deg);" data-500="background-color:rgb(255,0,0);transform:rotate(360deg);">WOOOT</div>

查看DEMO

  1. 我们在动画结束的时候，元素的顶部到达视口顶部
1
<div data-0="background-color:rgb(0,0,255);transform[bounce]:rotate(0deg);" data-500="background-color:rgb(255,0,0);transform[bounce]:rotate(360deg);">WOOOT</div>

查看DEMO

绝对和相对模式

例如，如果你不知道到底哪里的元素将在页面当中。这就是为什么有两种模式关键帧，也就是absolute和relative模式。

绝对模式

关键帧：描述多少绝对值文件已被向下滚动。

语法data-[offset]-[anchor]，其中offset可以是任意整数（0为默认值）和anchor可以是start（默认）或end。任一offset或anchor可以在某些情况下可以省略。

data-0= data-start= data-0-start：当滚动顶部是0。
data-100= data-100-start：当滚动顶部是100。
data–100= data–100-start：当滚动顶部为-100（听起来像废话，但请记住，插值将相对于这一点）。
data-end= data-0-end：当偏移量是0，但是从文档的底部，而不是从顶部计数。总之：当你到达页面的底部。
data-100-end：100px的之前，我们到达底部。
data–100-end：100px的后，我们到达底部（再次，它取决于你是否需要它）。

相对模式

代替限定相对于该关键帧的文件（即绝对值），我们能够定义它们取决于任何元件的相对于所述位置的视口。

语法是data-[offset]-(viewport-anchor)-[element-anchor]，在这里offset又可以是任意整数，缺省值为0两者viewport-anchor（强制性）和element-anchor（可选）可以是一个top，center或bottom。如果element-anchor省略，的值viewport-anchor将采取（就像与背景位置）。这里的关键帧和它们的含义的一些例子。

data-top= data-0-top= data-top-top= data-0-top-top：当元素的顶部与视口的顶部对齐。

data-100-top= data-100-top-top：当元素的顶部是100像素以上的视口的顶部。

data–100-top= data–100-top-top：当元素的顶部是低于100像素视口的顶部。

data-top-bottom= data-0-top-bottom：当元素的底部是在视口的顶部（它只是不可见）。

data-center-center= data-0-center-center：当元素位于视口的中心。

data-bottom-center= data-0-bottom-center：当元件的中心是在视口的底部，从而在元件的上半部分是可见的。

默认关键帧由其中关键帧中描述的元件的位置触发。然而有的时候的第二元件的位置应触发所述第一元件的关键帧。该data-anchor-target 属性可在这些情况下可以使用。data-anchor-target属性接受任何CSS选择并在页面匹配选择将被用于触发其中该属性被定义在元件上关键帧的第一个元素的位置。data-anchor-target需要IE 8或更大。

例如：任何CSS选择都可以使用，即 data-anchor-target=”.bar:not(.bacon) ~ span > a[href]”

注意：如果你需要支持IE 7，那么你可能只使用ID作为anchor-targetS，即#foo。该IE插件映射querySelector到getElementById。

这里有一个更好的了解锚的信息图表：

image