实现CSS滚动视差效果的几种方式

一诺滚雪球
1 阅读4分钟

前言

视差滚动效果是一种视觉设计。这种效果通过让页面中不同元素创造出层次感，让网页看起来更加生动。

本文将详细介绍如何使用纯CSS实现滚动视差效果，重点分析三种不同的实现方式。

1. 实现思路

在CSS中实现视差效果主要有以下几种思路：

  1. ​​固定背景法​​：使用background-attachment: fixed属性将背景图片固定在视口中，当内容滚动时背景保持不动，从而产生视差效果。
  2. ​​粘性定位法​​：使用position: sticky属性让特定元素在滚动到特定位置时"粘"在视口中，而其他内容继续滚动，产生视差感。
  3. ​​基于CSS 3D变换 ​​ 使用 transform-style: preserve-3d 和 perspective 的3D视差滚动效果

在实际项目中，可以根据自身具体需求选择最适合的方法。

2. 具体实现

下面详细介绍三种具体的CSS滚动视差实现方法：

  1. 基于粘性定位的视差效果
  2. 基于固定背景的视差效果
  3. 基于CSS 3D变换

2.1 基于粘性定位的视差效果

第一种实现方式，使用了position: sticky属性来创建视差效果。

具体代码如下：


    <style>
        .container {
            position: relative;
            width: 100%;
        }
        .container section {
            position: sticky;
            top: 0;
            height: 100vh;
            background: #333;
            display: flex;
        }
        .container section img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>

    <div class="container">
        <section>
            <img src="https://img1.baidu.com/it/u=2172818577,3783888802&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422">
        </section>
        <section>
            <img src="https://img2.baidu.com/it/u=3018303209,1765139986&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=722">
        </section>
        <section>
            <img src="https://img1.baidu.com/it/u=2376489989,3127732063&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=657">
        </section>
        <section>
            <img src="https://img0.baidu.com/it/u=3739429570,2783758709&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750">
        </section>
        <section>
            <img src="https://img2.baidu.com/it/u=1533484450,2625314894&fm=253&fmt=auto&app=138&f=JPEG?w=664&h=500">
        </section>
    </div>

代码为每个section都使用了position: sticky属性，设置为top: 0，高度为100vh(视口高度)。当滚动页面时，每个section会在到达视口顶部时粘住，保持在视口中可见。

2.2 基于固定背景的视差效果

第二种实现方式，使用了background-attachment: fixed属性来创建视差效果。

具体代码如下：

section {
            width: 100%;
            height: 100vh;
            position: relative;
            overflow: hidden;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: top center;
            background-attachment: fixed;
        }

        section:nth-child(1) {
            background-image: url("https://img1.baidu.com/it/u=2172818577,3783888802&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422");
        }

        section:nth-child(2) {
            background-image: url("https://img2.baidu.com/it/u=3018303209,1765139986&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=722");
        }

        section:nth-child(3) {
            background-image: url("https://img1.baidu.com/it/u=2376489989,3127732063&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=657");
        }

        section:nth-child(4) {
            background-image: url("https://img1.baidu.com/it/u=2172818577,3783888802&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422");
        }

<section></section>
<section></section>
<section></section>
<section></section>

代码通过background-attachment: fixed属性将背景图片固定在视口中。当用户滚动页面时，背景图片保持不动，而内容区域(包含文字的div)正常滚动，从而产生视差效果。

这种方法实现简单，兼容性好，适合创建全屏背景视差效果。

2.3 基于CSS 3D变换

通过CSS 3D变换实现了一个简单的视差滚动效果，主要利用transform-style: preserve-3d以及perspective属性实现。

具体代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {
            height: 100vh;
            overflow: hidden;
        }

        body {
            width: 100vw;
            height: 100vh;
            margin: 0;
            background: #222;

            /* 设置景深，并且开启3D效果 */
            perspective: 1px;
            transform-style: preserve-3d;
            overflow-x: hidden;
            overflow-y: scroll;
        }

        .section1::before {
            content: "";
            width: 100%;
            height: 100%;
            position: absolute;
            background: url("https://img1.baidu.com/it/u=2172818577,3783888802&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422") top center;
            background-size: cover;

            /* 将图片图层换到-1图层，并放大图片 */
            transform: translateZ(-1px) scale(2.2);
        }

        .section1,
        .section2 {
            width: 100%;
            min-height: 100vh;
            position: relative;

            /* 保留字类的3D属性 */
            transform-style: preserve-3d;

        }

        .section2 {
            background: rgb(68, 35, 19);
        }

    </style>
</head>

<body>
    <div class="section1">
    </div>

    <div class="section2">
    </div>

</body>

</html>

  • perspective :perspective 定义我们眼睛看到的 3d 立体效果，即空间感。所以perspective: 1px 时，我们是在告诉浏览器，以一个非常近的的距离（1 像素）来观察元素的 3D 变换。

  • transform-style: preserve-3d 开启3D空间。

  • transform: translateZ(-1px) scale(2.2); translateZ(-1px)把元素放在-1图层，距离越远物体越小，所以我们要设置scale将其放大。

  • transform-style: preserve-3d;这是为了让它有自己的3D样式，避免父元素的3D效果对其造成影响。

  • .section1::before: 通过 ::before 伪元素，可以将其视为一个实际的元素，具有自己的 position、transform、opacity 等属性，使得我们可以对背景图像进行 3D 变换、动画效果等操作。而这些操作使用 background-image 可能无法轻松实现。

利用​​透视（perspective）​​和​​Z轴位移（translateZ）​​控制不同层级的滚动速度差异，形成近快远慢的视差效果。

3. 总结

最后总结一下，通过本文的介绍，我们三种方式的纯CSS实现滚动视差效果的方法：基于粘性定位的方法和基于固定背景的方法和基于3D方式。

希望能对你有所帮助，如有错误，请指正O^O!

avatar
文章
阅读
粉丝