（前端）html+css+js实现滑动视差效果

一角的努力

已于 2023-12-01 18:04:06 修改

阅读量679

点赞数 8

分类专栏：前端文章标签：前端 javascript html5 css3

于 2023-11-10 20:31:10 首次发布

本文链接：https://blog.csdn.net/weixin_64388392/article/details/134338990

版权

前端专栏收录该内容

7 篇文章 2 订阅

订阅专栏

前一小段时间在做项目准备比赛，为了呈现出更好的web端界面，学习了不少网页动态特效，今天给大家分享一下如何利用html+css+js实现页面滑动视差效果

html和css部分无需过多介绍，利用js实现滑动视差效果有两种方法：

1、通过改变元素外边距实现滑动视差效果

2、通过改变元素定位距离实现滑动视差效果

好了，话不多说，上代码！

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滑动视差</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .bigBox {
            width: 100%;
            min-height: 200vh;
            background-color: pink;
        }

        .smallBox {
            position: relative;
            width: 100%;
            height: 100vh;
            overflow-y: hidden;
            border-bottom: 1px solid #fff;
            /* 渐变背景 */
            background: linear-gradient(200deg, rgba(135, 207, 235, 0.30), skyblue);
        }

        h2 {
            /* 绝对定位居中 */
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            color: #808080;
            font: normal normal 50px 'Poppins';
            letter-spacing: 5px;
        }
    </style>
</head>

<body>
    <div class="bigBox">
        <div class="smallBox">
            <h2 id="glide">一角的努力——LXGeffort</h2>
        </div>
    </div>

    <script>
        // 1、获取需要滑动的元素
        var text = document.querySelector('#glide');
        // 2、绑定事件
        window.addEventListener('scroll', () => {
            // 获取纵轴方向的滚动距离
            var value = window.scrollY;
            // 通过改变外边距来实现滑动视差效果
            text.style.marginTop = value * 1.2 + 'px';
        });
    </script>
</body>

</html>

效果如下所示：

最后说两个大家可能出错的点：

1、想要滑动的元素没有滑动

出现这种问题可能是以下几种情况导致：

（1）使用改变外边距方法实现滑动视差效果时没有加'px'

（2）你的窗口（或包裹滑动元素的盒子）滚动距离为0，这个时候设置好宽高就行

2、通过改变定位距离来实现滑动视差效果时需注意对滑动元素的定位不要使用百分比形式（如top：50%），这个时候使用此方法可能会出错

推荐大家使用第一种改变外边距的方法，这种方法一般都不会出现问题