视差滚动效果原理

视差滚动，这一技术最早出现是在Nike better World，之后这一网页技术在这些年频繁的出现在人们的视线当中，网络上关于视差滚动的教程和插件已经是多如牛毛， 不胜枚举。

如：30个让人兴奋的视差滚动、10个关于视差滚动的插件和教程、35个运用视差滚动效果的网站设计等等…

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

带着这些疑问，我们来一探究竟吧！

视差滚动是怎样一个概念呢？
首先我们还是先来了解一下什么是视差，维基百科的解释是这样的：

视“差”滚动浅析

视差，就是从有一定距离的两个点上观察同一个目标所产生的方向差异。从目标看两个点之间的夹角，叫做这两个点的视差，两点之间的距离称作基线。只要知道视差角度和基线长度，就可以计算出目标和观测者之间的距离。视差可用观测者的两个不同位置之间的距离（基线）在天体处的张角来表示。 可以从图中看到，随着观测点从一测移至另一侧，路边的河水和花草让人感觉远处的大山出现缓慢移动。

既然理解了视差，我们可以进一步来看下面这张图：

视“差”滚动浅析

在图中，我们可以看到，虽然多个建筑只是在按照自己的速度进行轨迹运动，但是在视觉上却行成一种新的体验，在web设计中，通过运用多层背景在以不同速度运动的情况下，形成的一种立体的运动效果，这种视觉体验，我们称之为视差效果。

那么在Web上是如何实现视差滚动的呢？

虽然网络上那些优秀的视差滚动效果层出不穷，但其实也都是基于一些最基础的视差动画制作而来的，所以我们可以先从一个简单的小例子来分析：

我们来看这样一个例子吧：

http://www.richardshepherd.com/smashing/parallax/background.html

这个页面有五个画面，然后通过浏览器窗口将整个页面分割成多个场景。

经过分析以后，其实我们可以很轻松的实现这样的效果，我们可以通过五个画面来组成这样一个页面，代码如下：

然后我们给这五个容器设置相应的背景，让页面变的丰富起来，并将背景图片相对于浏览器窗口固定，样式文件如下：

*{
padding:0;
margin:0
}
.bg{
background-position:center center;
background-attachment:fixed;
background-size:cover;
}
.bg_1{
background-image:url(1.jpg);
}
.bg_2{
background-image:url(2.jpg);
}
.bg_3{
background-image:url(3.jpg);
}
.bg_4{
background-image:url(4.jpg);
}
.bg_5{
background-image:url(5.jpg);
}

为了能更接近实例，我给所有页面设置了一个统一高度，这个高度相对于页面容器总是要少10%,为了就是能更贴近实际效果。

当我们滚动这个页面的时候，可以看到图片出现了简单的切换效果，只是通过给背景设置 background-attachment:fixed;这样一个css属性，便实现了一个简单的视差效果。虽然它现在看起来还很简陋。

那么我们还是先来了解一下，background-attachment到底是一个怎样的属性呢？我们来看看官方文档的解释：

background-attachment –属性设置背景图像是否固定或者随着页面的其余部分滚动。 取值有: scroll | fixed | inherit scroll: 随着页面的滚动轴背景图片将移动 fixed: 随着页面的滚动轴背景图片不会移动 inherit: 继承初始值: scroll

我们为什么要给当前页面中每个容器设置background-attachment：fixed呢？其实我们可以这样理解这个属性：当前每个容器的背景是不会因为滚动轴的滚动而移动的，但是滚动的同时，该容器还是会因为滚动轴的滚动而移动，所以就产生了上面的类似转场动画效果。
经过测试除了IE6以外都是可以支持background-attachment这个属性的，当然IE6并不是不支持，只是支持的标签有限，仅仅支持body和html的标签。

最后编辑：2016-02-17

作者：管理员

这个作者貌似有点懒，什么都没有留下。

站内专栏