杭州蓝韵网络 | 滚动视觉差在浏览一些网站的过程中有没

在浏览一些网站的过程中有没有注意到网站背景是如何滚动的呢？我们常见的方式就是背景随着浏览器滚动条的滚动而滚动。

文章图片

文章图片
但有个别网站它的背景并不会移动，只有内容随滚动条的滚动而滚动。这是怎么回事呢？

文章图片

文章图片
这就是我们所说的滚动视觉差。
视差滚动是从英文（ParallaxScroller）翻译过来，是近年来比较流行的一些网页设计应用，它是利用多层背景加上利用鼠标拖动滚动条来形成一些像动画一样的视觉效果，非常有感觉。
简单的说，其实就是固定背景不让它随着滚动轴移动，但包含背景的容器是跟着滚动的，所造成的视觉差异看起来就像跟转换场景一样。
可以想象我们坐在车上向车窗外看时，窗外的景色风光留在原地，而我们随着车辆的行驶看到了风景的变换。可以把窗外的景色当做背景，把车窗当做包含背景的容器，车辆的行驶当做滚动条的滚动。这是是不是更好理解了呢！

文章图片

文章图片
下面说说这种效果的实现方式吧！
在CSS中有个属性是background-attachment ，他的定义是：设置背景图像是否固定或者随着页面的其余部分滚动。
他有三个属性值
scroll：背景图片随着页面的滚动而滚动，这是默认的。
fixed：背景图片不会随着页面的滚动而滚动。
local：背景图片会随着元素内容的滚动而滚动。
我们所要用到的是fixed这个属性。
HTML:

文章图片

文章图片
CSS:

文章图片

文章图片
效果：
【杭州蓝韵网络 | 滚动视觉差】

文章图片

文章图片