CSS完成视差滚动效果

一、是什么

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

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

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

二、实现方式

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

• background-attachment
• transform:translate3D

background-attachment

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

值分别有如下：

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

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

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

核心的css代码如下：

section {
    height: 100vh;
}

.g-img {
    background-image: url(...);
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
}

整体例子如下：

 1