视“差”滚动浅析

视差滚动这一技术最早出现在Nike better World项目中，近年来，该网页技术频繁进入大众视野，网络上关于视差滚动的教程和插件也数不胜数，例如“30个让人兴奋的视差滚动”“10个关于视差滚动的插件和教程”“35个运用视差滚动效果的网站设计”等。

带着以下疑问，让我们深入探究视差滚动技术：

1. 什么是视差滚动？
2. 它的实现原理是什么？
3. 在哪些场景下需要用到视差滚动？
4. 有哪些工具能帮助我们快速实现视差滚动效果？

视差与视差效果

首先，我们来了解一下“视差”的概念。根据维基百科的解释，视差是指从有一定距离的两个点上观察同一个目标所产生的方向差异。从目标看两个点之间的夹角被称为这两个点的视差，两点之间的距离称作基线。只要知道视差角度和基线长度，就可以计算出目标和观测者之间的距离。视差也可用观测者的两个不同位置之间的距离（基线）在天体处的张角来表示。

从实际观察中可以发现，当观测点从一侧移至另一侧时，路边的河水和花草会让人感觉远处的大山出现缓慢移动。理解了视差之后，我们来看下面的情况：在图中，多个建筑各自按照自己的速度进行轨迹运动，但在视觉上却形成了一种全新的体验。在Web设计中，运用多层背景以不同速度运动，从而形成一种立体的运动效果，这种视觉体验就被称为视差效果。

Web上视差滚动的实现

虽然网络上优秀的视差滚动效果层出不穷，但它们都是基于一些最基础的视差动画制作而来的。下面我们通过一个简单的例子进行分析：示例页面

这个页面有五个画面，浏览器窗口将整个页面分割成多个场景。经过分析，我们可以通过五个画面来组成这样一个页面，代码如下（此处原文未给出代码，可补充具体代码示例）。

接着，我们给这五个容器设置相应的背景，让页面更加丰富，并将背景图片相对于浏览器窗口固定，样式文件如下（此处原文未给出样式文件，可补充具体样式代码）。

为了更接近实际效果，我们给所有页面设置一个统一高度，该高度相对于页面容器总是少10%。

当滚动这个页面时，图片会出现简单的切换效果。通过给背景设置 background-attachment: fixed; 这一CSS属性，就实现了一个简单的视差效果，尽管目前看起来还比较简陋。

background-attachment 属性解析

background-attachment 属性用于设置背景图像是否固定或者随着页面的其余部分滚动，其取值有：

• scroll：随着页面的滚动轴，背景图片将移动。
• fixed：随着页面的滚动轴，背景图片不会移动。
• inherit：继承初始值，初始值为 scroll。

我们给当前页面中每个容器设置 background-attachment: fixed 的原因是：每个容器的背景不会因滚动轴的滚动而移动，但容器本身会随着滚动轴的滚动而移动，从而产生类似转场动画的效果。

经过测试，除了IE6以外，其他浏览器均支持 background-attachment 属性。IE6并非完全不支持，只是支持的标签有限，仅支持 body 和 html 标签。

从视图上看，由于我们始终看到的区域是浏览器窗口，当上下滚动页面时，就会形成相应的视觉感受。

页面元素与JS实现

每个场景中都有相应的页面元素，如文字、图片，它们会按照自己的方式滚动。查看页面的源码可以发现，页面中为几个元素都添加了 data-type 类型、data-speed 速度和 background-position 属性。随着滚动轴滚动，background-position 的值会发生相应改变。data-type="background" 和 data-speed="8" 分别用于定义数据类型和当前元素的速度取值，向JS传递参数，而 background-position 则用于定义背景的位置。

页面的JS代码可参考：script.js

作者的主要思路是：通过遍历带有 data-type 的元素，读取相应元素的位置和滚动速度，找到 data-type="background" 的元素，存储当前的基础变量。当窗口滚动时，先通过计算滚动条高度和窗口高度判断当前元素是否在视野中，从而改变相应元素的值。简单来说，页面的JS是通过监听 scroll 事件来实现的。

这个简单的例子通过JS反向滚动背景，达到了视差滚动的效果，许多优秀的视差滚动效果也是通过多层背景以不同的速度、方向和效果运动配合实现的。

视差滚动的应用场景

吸引用户浏览

视差滚动通常由大量的背景和元素组成，这意味着需要大量的背景图片。通过高分辨率的大图吸引用户浏览，让用户的视线停留在背景上。不过，我们需要考虑页面的加载情况，因此不少视差滚动页面会提前添加loading动画。

传达视觉效果

需要设计好各个图层中元素和背景的关系，通过良好的设计传达视觉效果，避免页面变得花哨无趣。最好给页面赋予一种叙事感，通过页面元素传达一个有趣的故事等。需要注意的是，内容至关重要，技术只是手段。

相关资源

感兴趣的同学可以关注以下资源：

• Parallax.Scrolling on Facebook
• 18 Websites That Take Scrolling to the Next Level
• 20 Fantastic Website Designs Using Pastel Color Schemes

最后感谢阅读，希望本文能为您带来些许帮助！