视觉滚动效果-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_47048022/article/details/118568928

视差滚动效果

在不用stellar.js插件的前提下实现视觉滚动效果。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            padding: 0;
            margin: 0;
        }

        #header {
            height: 50px;
            background-color: dodgerblue;
        }

        #pics {
            height: 500px;
            background-color: cadetblue;
        }

        .sections {
            background-color: #fff;
            height: 300px;
            text-align: center;
            font-size: 30px;
            padding: 50px;
        }

        .section-bgs {
            height: 600px;
            background-repeat: no-repeat;
            background-position-x: 50%;
            background-attachment: fixed;
        }

        #section-1-bg {
            background-image: url(https://sqimg.qq.com/qq_product_operations/im/2015/bg1_1600.jpg);
        }

        #section-2-bg {
            background-image: url(https://sqimg.qq.com/qq_product_operations/im/2015/update/avds.jpg);
        }

        #section-3-bg {
            background-image: url(https://sqimg.qq.com/qq_product_operations/im/2015/bg3_1600.jpg);
        }
    </style>
</head>
<body>
    <div id="header"></div>
    <div id="pics"></div>
    <div id="pages">
        <div id="section-1" class="sections">
            每一天，乐在沟通
        </div>
        <div id="section-1-bg" class="section-bgs"></div>
        <div id="section-2" class="sections">
            沟通，是随时随地爽快收发
        </div>
        <div id="section-2-bg" class="section-bgs"></div>
        <div id="section-3" class="sections">
            沟通，是跨越千山万水的亲切声音
        </div>
        <div id="section-3-bg" class="section-bgs"></div>
    </div>

    <script>
        function getTop(node) {
            return node.getBoundingClientRect().top;//获取元素的绝对位置
        }

        function setBgPosY(node, posY) {
            node.style.backgroundPositionY = `${posY}px`;
        } 

        const sections = document.querySelectorAll('.section-bgs');

        window.onscroll = (e) => {
            sections.forEach((node) => {
                setBgPosY(node, getTop(node) / 20);
            });
        }
    </script>
</body>
</html>