纯css实现：如何快速做一个视差滚动效果

南极一块修炼千年的大冰块
4,146 阅读5分钟

这是我参与更文挑战的第29天，活动详情查看： 更文挑战

前言

大家深夜好哇！每到夜深人静的时候，就是我文思泉涌的时候，今天我们来谈谈css实现的“视差滚动”效果。

说起视差滚动，我之前听都没听说过，更别说用过了，偶尔有文章提到视差滚动，就觉得好像很高大上一样。其实了解之后，不就是页面滚动时不同的元素滚动的速率不同嘛！

好了，今天我们就用css来简单的实现一下视差滚动~

构思

首先，我的构思效果是上中下三个DOM元素，分别是文字1、图片、文字2，图片的滚动速率是正常的，文字1的滚动速率 < 文字2的滚动速率 < 图片的滚动速率。

以这个构思来说，我搭建了基础的页面DOM结构如下：

    <style>
        .box {
            margin: 300px auto;
            width: 600px;
            height: 600px;
            background: url("./namei.png") no-repeat center;
            overflow-x: hidden;
            overflow-y: auto;
        }
        img{
            display: block;
            height: 100px;
            margin: auto;
        }
        p{
            font-size: 60px;
            font-weight: bold;
            color: #333;
        }
    </style>
    <div class="box">
        <div class="top">
            <p>你好呀，我是南极大冰块~目前是一名在线掘金高级摸鱼师~</p>
        </div>
        <img src="./qb.gif" alt="">
        <div class="bottom">
            <p>你好呀，我是南极大冰块~目前是一名在线掘金高级摸鱼师，精通摸鱼、划水、坐着睡觉、拍马屁、吹牛、甩锅、吵架等前端开发必备技能~关注我，一起学习好玩的前端知识吧！</p>
        </div>
    </div>

运行效果如下：

GIF 2021-6-29 23-20-13.gif

如果是js的话，我们可以监听页面滚动的距离，然后手动去调整每个DOM元素的滚动速率，但是我们该怎么用css改变DOM元素滚动的速率呢？

答案很简单，它就是年度最佳css属性、救场王、人称万能的——transform！

你一定经常使用transform: translate();，但是我们更多的是使用它的2D效果，但它其实更强大的是3D变形~

当我们给元素设置transform: translateZ(-1px);时，就相当于这个元素离我们远了1倍，比如我们现在给.bottom元素加上transform: translateZ(-1px);之后，可看到如下效果：

image.png

当当当当~ 没有任何效果！

这是为什么呢？这是因为.bottom元素并没有获得透视的效果，所以transform: translateZ(-1px);看起来并没有生效。

我们可以用perspective来给.bottom元素添加透视效果。perspective说明如下：

为元素定义perspective属性时，其子元素会获得透视效果，而不是元素本身。

属性值可设置为number，表示元素距离视图的距离，以像素计。

所以这时候我们给.box元素添加perspective: 1px;即可，效果如下：

image.png

当当当当~ transform: translateZ(-1px);生效啦，字小了一倍。

这时候，我们可以想到，字小了一倍是因为.bottom元素离我们远了一倍，那么滚动的时候，页面滚动100px，实际上.bottom元素滚动的只会是50px，不同元素滚动的速率不同的问题迎刃而解了！

根据这个思路，我们把代码完善如下：

    <style>
        .box {
            margin: 300px auto;
            width: 600px;
            height: 600px;
            background: url("./namei.png") no-repeat center;
            overflow-x: hidden;
            overflow-y: auto;
            perspective: 1px;
        }
        .top{
            height: 500px;
            transform: translateZ(-3px);
        }
        img{
            display: block;
            height: 100px;
            margin: auto;
        }
        .bottom{
            height: 800px;
            transform: translateZ(-1px);
        }
        p{
            font-size: 60px;
            font-weight: bold;
            color: #333;
        }
    </style>


    <div class="box">
        <div class="top">
            <p>你好呀，我是南极大冰块~目前是一名在线掘金高级摸鱼师~</p>
        </div>
        <img src="./qb.gif" alt="">
        <div class="bottom">
            <p>你好呀，我是南极大冰块~目前是一名在线掘金高级摸鱼师，精通摸鱼、划水、坐着睡觉、拍马屁、吹牛、甩锅、吵架等前端开发必备技能~关注我，一起学习好玩的前端知识吧！</p>
        </div>
    </div>

运行效果如下所示：

GIF 2021-6-29 23-39-18.gif

完美达到预期：文字1的滚动速率 < 文字2的滚动速率 < 图片的滚动速率

后记

今天是我坚持日更的第二十九天，最近老是加班，每天除了上班、通勤、吃饭、遛狗之外，只有7、8个小时的样子，可是我还是挤出时间做到了每日更文。

嗐~ 一个人真心想做一件事，怎么会觉得难呢？

每天输出一点点，进步一点点。日拱一卒，功不唐捐。大家也要一起加油呀~ 嘻嘻~

如果本文对你有帮助，别再只是悄悄收藏啦！大胆点儿，比如点个赞呀，关注大冰块呀，一起和大冰块学习更多好玩的技术博客吧！

d2a3b6f182407290c859b16b1d4715a3.gif

更文挑战的文章目录如下：

avatar
文章
阅读
粉丝