<!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>滚轮视差效果</title>
<style>
html,
body {
margin: 0;
padding: 0;
height: 200vh;
overflow-x: hidden;
}
.background {
background-image: url("mountain\ range.jpg");
background-size: cover;
background-position: 50% 50%;
height: 200vh;
font: 900 10rem "";
line-height: 130vh;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: relative;
text-align: center;
overflow: hidden;
}
.background::before {
content: "";
background-size: cover;
background-image: inherit;
background-position: 50% 50%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -99;
}
h1 {
position: absolute;
text-align: center;
width: 100%;
letter-spacing: 10px;
color: #fff;
}
h2 {
position: absolute;
letter-spacing: 2px;
top: 120vh;
width: 60%;
color: #fff;
left: 50%;
transform: translateX(-50%);
padding: 30px;
background-color: rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<h1>bilibili<br />滚轮视差效果</h1>
<div class="background"><span>Generation's Letter</span></div>
<h2>
Students, get up and shoulder the rise and fall of the world. Listen to it. It's the pain of the public. Look at the decline of the land year by
year. Should we choose war or surrender? We should be masters and fight to death in the battlefield, We don't want to be slaves but rise to the
top. Today we are the fragrance of peaches and plums, and tomorrow we are the pillars of society. Today we sing together, and tomorrow we will
set off a huge wave of national self-help, and the huge wave will continue to rise, Students, students, come up with strength to shoulder the
rise and fall of the world. The waves are constantly rising. Students, come up with strength to shoulder the rise and fall of the world
</h2>
<script>
const background = document.querySelector(".background");
document.addEventListener("scroll", () => {
const scrollY = window.scrollY;
if (scrollY !== 0) {
background.style.backgroundPosition = `calc(50% + ${scrollY}px) calc(50% + ${scrollY}px)`;
} else {
background.style.backgroundPosition = "";
}
});
</script>
</body>
</html>
html++js+css实现滚动视差效果
于 2022-05-01 19:52:54 首次发布