web_tests
/
视差滚动.html

<!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>rolling</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            min-height: 1500px;
            background-color: #255877;
        }
        div{
            position: relative;
            width: 100%;
            height: 100vh;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        div::before{
            content: '';
            position: absolute;
            bottom: 0px;
            width: 100%;
            height: 100px;
            background: linear-gradient(to top,#255877,transparent);
            /*content:''————before中的内容为空，只用于修改div底部图片样式
            bottom:0px————原本:before在div前添加内容，设置绝对位置和bottom:0px之后这部分内容移动到div的底部，
            配合linear-gradient(to top,color1,color2) 从底部到渐变，由青紫色渐变为透明色（即图片内容）
            实现图片毛玻璃/羽化效果*/
            z-index: 10;
        }
        div::after{
            content: '';
            position: absolute;
            top: 0;
            left:0;
            width: 100%;
            height: 100%;
            z-index: 10;
            mix-blend-mode: color;
            background-color: #255877;
            /* 为整个div加滤镜，先设置高宽占满整个屏幕，同时将z轴位置设为最高的一档，再使用mix-blend-mode:color使这部分的背景色和其余元素的颜色混合 */
        }
        img{
            position: absolute;
            top: 0;
            left: 0;
            object-fit: cover;
            /* object-fit 裁剪图片 */
            width: 100%;
            height: 100%;
            pointer-events: none;
        }
        #text{
            color: #fff;
            font-size: 10ex;
            position: relative;
            z-index: 1;
        }
        #road{
            z-index: 2;
        }
    </style>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    <div>
        <img src="assets/bg.jpg" alt="" id="bg">
        <img src="assets/moon.png" alt="" id="moon">
        <img src="assets/mountain.png" alt="" id="mountain">
        <img src="assets/road.png" alt="" id="road">
        <h2 id="text">Moon Light</h2>
    </div>
    <script>
        window.addEventListener('scroll',function(){
            let x = window.scrollY
            $('#moon').css('left',-x*0.5);
            $('#bg').css('top',x*0.5);
            $('#mountain').css('top',-x*0.15)
            $('road').css('top',x*0.15)
            $('#text').css('top',x*0.8)
        })
    </script>
</body>
</html>