仅需一个CSS样式轻松搞定视差滚动

视差滚动

所谓的视差滚动，就是在页面滚动过程中，多层次的元素进行不同程度的位移，带来立体的视差效果。还有很多的奇思妙想的展现方式，都是滚动页面触发的，也可称为视差滚动。视差滚动里面最基础的就是切换背景，这点其实一个 CSS 就满足了。

原理

通过样式属性background-attachment: fixed固定背景图片位置。将背景图固定在浏览器显示的窗口的固定位置，页面上下滚动时，背景图会一直固定在窗口设置的位置。
简单来说，就是将图片钉在窗口某一位置。这样一来，我们滚动右侧滚动条的时候，这时背景图片看起来就像是和内容一起在运动一样。

我们来简单的看一下背景图定位与不定位的区别：

不加入background-attachment: fixed;时

加入background-attachment: fixed;后

源码如下

<div class="demo">
  <ul>
    <li>我是文字1</li>
    <li>我是文字2</li>
    <li>我是文字3</li>
    <li>我是文字4</li>
    <li>我是文字5</li>
    <li>我是文字6</li>
    <li>我是文字7</li>
    <li>我是文字8</li>
    <li>我是文字9</li>
    <li>我是文字10</li>
    <li>我是文字11</li>
    <li>我是文字12</li>
    <li>我是文字13</li>
    <li>我是文字14</li>
    <li>我是文字15</li>
    <li>我是文字16</li>
    <li>我是文字17</li>
    <li>我是文字19</li>
    <li>我是文字20</li>
  </ul>
</div>

* {
    
    
  margin: 0;
  padding: 0;
}
.demo {
    
    
  background: url(img/1.jpg) no-repeat;
  background-attachment: fixed; /*关键代码  固定定位*/
  background-size: 50%;
  line-height: 60px;
  font-size: 30px;
}

我们会发现加入固定定位以后，图片就像是在与文字内容做相对运动。原理知道以后，我们现在就可以来实现视差滚动了。

---

源码

<div class="article section1"></div>
<div class="article section2"></div>
<div class="article section3"></div>

* {
    
    
  margin: 0;
  padding: 0;
}
.article {
    
    
  height: 100vh;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}
/*分别给每个部分设置不同的背景*/
.section1 {
    
    
  background-image: url(img/1.jpg);
}
.section2 {
    
    
  background-image: url(img/2.jpg);
}
.section3 {
    
    
  background-image: url(img/3.jpg);
}

效果展示：

当我们滚动页面到达一定部位时，我们会发现页面是这样的，下面图片先露出来的图片的下半部分，其次是头。

滚到此处时，第二张图片才算真正显示出来。

每张图片按顺序排列显示，由于都设置了background-attachment: fixed图片一直会跟着窗口运动。第一张图片展示完之后，它将会去显示第二张图片。第一张图然后开始慢慢消失，被第二张图片占据直到第二张图片显示完全，第一张图片才算完全消失。