一、是什么

视差滚动（Parallax Scrolling）是指多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验

我们可以把网页解刨成：背景层、内容层、悬浮层

当滚动鼠标滑轮的时候，各个图层以不同的速度移动，形成视觉差的效果

二、实现方式

使用 css 形式实现视觉差滚动效果的方式有：

• background-attachment
• transform:translate3D

background-attachment: fixed

作用是设置背景图像是否固定或者随着页面的其余部分滚动

值分别有如下：

• scroll：默认值，背景图像会随着页面其余部分的滚动而移动
• fixed：当页面的其余部分滚动时，背景图像不会移动
• inherit：继承父元素 background-attachment 属性的值

完成滚动视觉差就需要将 background-attachment 属性设置为 fixed，让背景相对于视口固定。及时一个元素有滚动机制，背景也不会随着元素的内容而滚动

也就是说，背景一开始就已经被固定在初始的位置

示例如下：

<style>
      div {
        height: 100vh;
        background: rgba(0, 0, 0, 0.7);
        color: #fff;
        line-height: 100vh;
        text-align: center;
        font-size: 20vh;
      }

      .a-img1 {
        background-image: url(https://images.pexels.com/photos/1097491/pexels-photo-1097491.jpeg);
        background-attachment: fixed;
        background-size: cover;
        background-position: center center;
      }

      .a-img2 {
        background-image: url(https://images.pexels.com/photos/2437299/pexels-photo-2437299.jpeg);
        background-attachment: fixed;
        background-size: cover;
        background-position: center center;
      }

      .a-img3 {
        background-image: url(https://images.pexels.com/photos/1005417/pexels-photo-1005417.jpeg);
        background-attachment: fixed;
        background-size: cover;
        background-position: center center;
      }
    </style>
    <div class="a-text">1</div>
    <div class="a-img1">2</div>
    <div class="a-text">3</div>
    <div class="a-img2">4</div>
    <div class="a-text">5</div>
    <div class="a-img3">6</div>
    <div class="a-text">7</div>

效果：

background-attachment

transform:translate3D

• 待补充