我想学习如何做视差滚动效果，看了一些教程，并尝试了一个，但它不工作，任何想法可能是错的?
显示的只是静态图片，根本没有任何视差效果。
我不能上传这个帖子，因为它说我的帖子主要是代码，我希望我可以在这里添加一些lorem，因为我真的不知道该添加什么样的信息…
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" />
<link rel="stylesheet" href="css/style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap"
rel="stylesheet"
/>
<title>Task 3</title>
</head>
<body>
<div class="parallax-wrapper">
<div class="single-parallax parallax parallax-bg-1">
<h1>Parallax One</h1>
</div>
<div class="single-parallax static-bg">
<h1>No Parallax</h1>
</div>
<div class="single-parallax parallax parallax-bg-2">
<h1>Parallax One</h1>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
* {
margin: 0;
padding: 0;
}
.parallax-wrapper {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 2px;
}
.single-parallax {
position: relative;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.single-parallax h1 {
font-size: 20px;
background: rgba(0, 0, 0, 0.3);
color: #fff;
padding: 5px 10px;
}
.parallax::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
transform: translateZ(-1px) scale(1.5);
background-size: 100%;
z-index: -1;
}
.parallax-bg-1::after {
background-image: url(../imgs/1.png);
}
.parallax-bg-2::after {
background-image: url(../imgs/2.png);
}
.static-bg {
background: greenyellow;
}
你差一点就成功了!你不应该把background-image加到::after，你可以把它加到元素本身。您还忘记了background-image的几行代码:
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
这是所有的在一起:
* {
margin: 0;
padding: 0;
}
.parallax-wrapper {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 2px;
}
.single-parallax {
position: relative;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.single-parallax h1 {
font-size: 20px;
background: rgba(0, 0, 0, 0.3);
color: #fff;
padding: 5px 10px;
}
.parallax-bg-1 {
background-image: url(../imgs/1.png);
}
.parallax-bg-2 {
background-image: url(../imgs/2.png);
}
.static-bg {
background: greenyellow;
}
<div class="parallax-wrapper">
<div class="single-parallax parallax parallax-bg-1">
<h1>Parallax One</h1>
</div>
<div class="single-parallax static-bg">
<h1>No Parallax</h1>
</div>
<div class="single-parallax parallax parallax-bg-2">
<h1>Parallax One</h1>
</div>
</div>
如果你想在background-image上有小滚动效果，你可以使用::after，就像你做的那样:
* {
margin: 0;
padding: 0;
}
.parallax-wrapper{
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 2px;
}
.single-parallax{
position: relative;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.single-parallax h1{
font-size: 20px;
background: rgba(0,0,0,.3);
color: #fff;
padding: 5px 10px;
}
.parallax::after{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
content: '';
transform: translateZ(-1px) scale(1.5);
background-size: 100%;
z-index: -1;
}
.parallax-bg-1::after{
background-image: url(../imgs/1.png);
}
.parallax-bg-2::after{
background-image: url(../imgs/2.png);
}
.static-bg{
background: greenyellow;
}
<div class="parallax-wrapper">
<div class="single-parallax parallax parallax-bg-1">
<h1>Parallax One</h1>
</div>
<div class="single-parallax static-bg">
<h1>No Parallax</h1>
</div>
<div class="single-parallax parallax parallax-bg-2">
<h1>Parallax One</h1>
</div>
</div>