我想学习如何做视差滚动效果，看了一些教程，并尝试了一个，但它不工作，任何想法可能是错误的？
它显示的只是静态的画面，它没有任何视差效果。
我不能上传这篇文章，因为它说我的文章主要是代码，我希望我可以在这里添加一些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>CSS代码：
* {
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;
}
1条答案
按热度按时间wlzqhblo1#
你就快成功了!你不应该把
background-image添加到::after中，你可以直接把它添加到元素本身中。而且你忘记了background-image的几行代码：以下是全部内容：
x一个一个一个一个x一个一个二个x
如果你想在
background-image上有一点滚动效果，你可以像以前那样使用::after：一个三个三个一个