001-视差滚动

最新推荐文章于 2024-08-20 13:42:14 发布

小半q

最新推荐文章于 2024-08-20 13:42:14 发布

阅读量365

点赞数 9

分类专栏： css练习文章标签： css javascript 前端

本文链接：https://blog.csdn.net/qq_42482544/article/details/135760966

版权

css练习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

效果

在这里插入图片描述

代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <title>Document</title>
</head>
<body>
<section>
    <img src="./images/bg.jpg" id="bg"/>
    <img src="./images/moon.png" id="moon"/>
    <img src="./images/mountain.png" id="mountain"/>
    <img src="./images/road.png" id="road"/>
    <h2 id="text">Moon Light</h2>
</section>
<script>
    let bg = document.getElementById("bg");
    let moon = document.getElementById("moon");
    let mountain = document.getElementById("mountain");
    let road = document.getElementById("road");
    let text = document.getElementById("text");

    window.addEventListener("scroll", function () {
        let value = window.scrollY;
        bg.style.top = value * 0.5 + "px";
        moon.style.left = value * 1.05 + "px";
        mountain.style.top = value * 0.15 + "px";
        road.style.top = value * 0.1 + "px";
        text.style.top = value + "px";
    })

</script>
</body>
</html>

style.css

* {
    margin: 0;
    padding: 0;
    font-family: "Poppins", sans-serif;
}

body {
    background: #0a2a43;
    min-height: 1500px;
}

section {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

section::before {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(to top, #0a2a43, transparent);
    z-index: 10000;
}

section::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0a2a43;
    mix-blend-mode: color;
    z-index: 10000;
}

section img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

#text {
    position: relative;
    color: #fff;
    font-size: 10em;
    z-index: 1;
}

#road {
    z-index: 2;
}