效果
代码
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;
}
素材
bg.jpg
moon.png
mountain.png
road.png