滚动滚动条时，做一些联动操作

最新推荐文章于 2024-04-28 15:42:08 发布

lianflower

最新推荐文章于 2024-04-28 15:42:08 发布

阅读量305

点赞数 1

文章标签： CSS JavaScript 页面滚动动画效果元素隐藏

原文链接：https://www.youtube.com/watch?v=lZ-OO7x75Rc

版权

Css 同时被 2 个专栏收录

33 篇文章 0 订阅

订阅专栏

JavaScript

25 篇文章 1 订阅

订阅专栏

转载：https://www.youtube.com/watch?v=lZ-OO7x75Rc

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *
        {
            margin: 0;
            padding: 0;
        }
        body
        {
            height: 200vh;
            background: #111;
        }
        section
        {
            position: absolute;
            width: 100%;
            height: calc(100% - 200px);
            background: #2abbff;
        }
        section .curve
        {
            position: absolute;
            width: 100%;
            height: 200px;
            bottom: -200px;
            /*转换元素时，原点的位置为top*/
            transform-origin: top;
        }
        section .curve img
        {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <section>
        <span class="curve">
            <img src="curve.png">
        </span>
    </section>
</body>
<script type="text/javascript">
    var scroll = document.querySelector('.curve');
    //这里有一个小知识：当使用滚轮滚动一下鼠标时，会触发两次事件
    //第一次传过来的window.scrollY为起始值，第二次传过来的window.scrollY为终止值
    window.addEventListener('scroll', function () {
        var value = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        //对curve容器使用转换，进行垂直缩放：transform：scaleY(具体的值)
        //根据滚动鼠标的速度值，设置scaleY的大小，每向下滚动一下鼠标，scaleY的值会越接近0，以此达到让curve容器消失的效果 //transform: scaleY(0);
        //每向上滚动一下鼠标，scaleY的值会越接近1，以此达到让curve容器完全显示出来的效果 //transform: scaleY(1);
        //还有就是，每滚动一次鼠标，速度值为100左右，所以如果你想让用户滚动5次鼠标后，就让curve容器消失，则设置value为：1 + window.scrollY / -500
        //如果想让用户滚动3次鼠标后，就让curve容器消失，则设置value为：1 + window.scrollY / - 300
        value = 1 + value / -500;
        scroll.style.transform = "scaleY(" + value + ")";
    })
</script>
</html>