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>scroll</title>
<link rel="stylesheet" type="text/css" href="scroll.css">
</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() {
var value = window.scrollY;
bg.style.top = value * 0.5 + 'px';
moon.style.left = value * 0.5 + 'px';
/*山的图片是向上移动的，因此top为负值 */
mountain.style.top = -value * 0.15 + 'px';
road.style.top = value * 0.15 + 'px';
text.style.top = value * 1 + 'px';
})
</script>
</body>
</html>
CSS代码
/*清除内外边距 设置字体 */
* {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
body {
background: #0a2a43;
min-height: 1500px;
}
section {
/* 子绝父相 ： 儿子是绝对定位，父亲就要是相对定位 */
position: relative;
width: 100%;
/* 100vh 是整个屏幕高度 */
height: 100vh;
overflow: hidden;
/* flex 布局 */
display: flex;
/*设置主轴排列 */
justify-content: center;
/*设置侧轴排列 */
align-items: center;
}
/* section::before 这一步是为了使得图片与背景衔接的那一块有一个颜色的过渡 */
section::before {
content: "";
position: absolute;
bottom: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, #0a2a43, transparent);
z-index: 999;
}
/* section::after 这一步是为了使得图片有一个覆盖的颜色 */
section::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #0a2a43;
z-index: 999;
/*“颜色”模式模式可以看成是“饱合度”模式和“色相”模式的综合效果。 */
mix-blend-mode: color;
}
section img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*遇到图像变形时 最佳最完美的居中自动剪裁 */
object-fit: cover;
/* 阻止用户的点击动作产生任何效果*/
pointer-events: none;
}
/* 字体要占位 用相对定位*/
#text {
position: relative;
color: #fff;
/* em 相对于父节点字体的大小 整个页面的1em不是一个固定的值 */
font-size: 10em;
/* 字体要在图片之上 因此要设置z-index*/
z-index: 1;
}
/* 字体在移动时会藏在road图片的下边，因此road图片的 z-index要比文字的z-index大 */
#road {
z-index: 2;
}