视差滚动问题(无限滚动)

我没有任何经验，只是摆弄一些代码。我正在尝试制作一个视差页，有三排建筑层叠在一起。(第一层向上移动，第二层向下移动，第三层也向下移动，但速度更快(。起初一切都很顺利，但如果我滚动到页面底部，最后一排建筑就会无限向下移动。有没有办法阻止它移动？

这是完整的代码；

let city2 = document.getElementById('city-2');
let city3 = document.getElementById('city-3');
let header = document.getElementById('header');
window.addEventListener('scroll', function() {
let value = window.scrollY;
city2.style.top = value * 0.5 + 'px';
city3.style.top = value * 1.2 + 'px';
header.style.top = value * 0.8 + 'px';
})

@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rancho&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Langar&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background: #fff;
min-height: 100hv;
}
#header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 30px 100px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 10000;
}
#header .logo {
color: #094b65;
font-weight: 700;
font-size: 2em;
text-decoration: none;
}
#header ul {
display: flex;
justify-content: center;
align-items: center;
}
#header ul li {
list-style: none;
margin-left: 20px;
}
#header ul li a {
text-decoration: none;
padding: 6px 15px;
color: #094b65;
border-radius: 20px;
}
#header ul li a:hover,
#header ul li a.active {
background: #094b65;
color: #fff;
}
section {
position: relative;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
section::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
/*background: linear-gradient(to top, #98A6B3,transparent);*/
z-index: 10;
}
section img {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
section #text {
position: absolute;
color: #094b65;
font-size: 10vw;
text-align: center;
line-height: 0.55em;
font-family: 'Rancho', cursive;
transform: translateY(-50%);
}
section #text span {
font-size: 0.20em;
letter-spacing: 2px;
font-weight: 400;
font-family: 'Poppins', sans-serif;
}
.sec {
position: relative;
padding: 100px;
background: #98A6B3;
}
.sec h2 {
font-size: 3.5em;
color: #fff;
margin-bottom: 10px;
}
.sec p {
font-size: 1em;
color: #fff;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header id="header">
<a href="#" class="logo">Logo</a>
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Menu</a></li>
</ul>
</header>
<section>
<img src="https://website-2.quintendesaever.repl.co/images/city-3.png" id="city-3">
<img src="https://website-2.quintendesaever.repl.co/images/city-2.png" id="city-2">
<img src="https://website-2.quintendesaever.repl.co/images/city-1.png" id="city-1">
</section>
<div class="sec">
<h2>Parallax Scrolling Effects</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras fermentum odio eu feugiat. Leo integer malesuada nunc vel risus commodo viverra maecenas accumsan. Mi tempus imperdiet nulla malesuada pellentesque. Urna molestie at elementum eu. Arcu cursus euismod quis viverra nibh cras pulvinar mattis. Ut faucibus pulvinar elementum integer enim neque volutpat. Elementum sagittis vitae et leo duis ut diam quam. Facilisis magna etiam tempor orci eu lobortis elementum nibh tellus. Non odio euismod lacinia at quis risus sed. Augue eget arcu dictum varius duis at consectetur lorem donec. Ut sem nulla pharetra diam. Integer feugiat scelerisque varius morbi enim nunc.<br><br>Vestibulum rhoncus est pellentesque elit. Lectus arcu bibendum at varius. Blandit cursus risus at ultrices. Est velit egestas dui id ornare arcu odio ut sem. Tempor orci eu lobortis elementum nibh. Pellentesque nec nam aliquam sem et tortor consequat id porta. Sed ullamcorper morbi tincidunt ornare massa eget egestas. Malesuada nunc vel risus commodo viverra maecenas accumsan lacus vel. Senectus et netus et malesuada fames. A pellentesque sit amet porttitor eget dolor morbi non arcu. Duis tristique sollicitudin nibh sit amet commodo nulla. Dictum varius duis at consectetur. Egestas quis ipsum suspendisse ultrices gravida dictum fusce ut. Sed augue lacus viverra vitae congue.<br><br>Gravida cum sociis natoque penatibus et magnis dis parturient. Duis ut diam quam nulla. Faucibus turpis in eu mi bibendum neque. Lorem ipsum dolor sit amet consectetur adipiscing elit ut aliquam. Commodo quis imperdiet massa tincidunt nunc pulvinar. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget egestas. Porttitor lacus luctus accumsan tortor posuere ac ut. Molestie at elementum eu facilisis sed odio morbi. Nec nam aliquam sem et tortor consequat. Faucibus interdum posuere lorem ipsum. Tincidunt lobortis feugiat vivamus at augue eget. Amet venenatis urna cursus eget nunc scelerisque viverra mauris. Nunc sed velit dignissim sodales ut eu sem. Dictum varius duis at consectetur lorem donec massa. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at.<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras fermentum odio eu feugiat. Leo integer malesuada nunc vel risus commodo viverra maecenas accumsan. Mi tempus imperdiet nulla malesuada pellentesque. Urna molestie at elementum eu. Arcu cursus euismod quis viverra nibh cras pulvinar mattis. Ut faucibus pulvinar elementum integer enim neque volutpat. Elementum sagittis vitae et leo duis ut diam quam. Facilisis magna etiam tempor orci eu lobortis elementum nibh tellus. Non odio euismod lacinia at quis risus sed. Augue eget arcu dictum varius duis at consectetur lorem donec. Ut sem nulla pharetra diam. Integer feugiat scelerisque varius morbi enim nunc.<br><br>Vestibulum rhoncus est pellentesque elit. Lectus arcu bibendum at varius. Blandit cursus risus at ultrices. Est velit egestas dui id ornare arcu odio ut sem. Tempor orci eu lobortis elementum nibh. Pellentesque nec nam aliquam sem et tortor consequat id porta. Sed ullamcorper morbi tincidunt ornare massa eget egestas. Malesuada nunc vel risus commodo viverra maecenas accumsan lacus vel. Senectus et netus et malesuada fames. A pellentesque sit amet porttitor eget dolor morbi non arcu. Duis tristique sollicitudin nibh sit amet commodo nulla. Dictum varius duis at consectetur. Egestas quis ipsum suspendisse ultrices gravida dictum fusce ut. Sed augue lacus viverra vitae congue.<br><br>Gravida cum sociis natoque penatibus et magnis dis parturient. Duis ut diam quam nulla. Faucibus turpis in eu mi bibendum neque. Lorem ipsum dolor sit amet consectetur adipiscing elit ut aliquam. Commodo quis imperdiet massa tincidunt nunc pulvinar. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget egestas. Porttitor lacus luctus accumsan tortor posuere ac ut. Molestie at elementum eu facilisis sed odio morbi. Nec nam aliquam sem et tortor consequat. Faucibus interdum posuere lorem ipsum. Tincidunt lobortis feugiat vivamus at augue eget. Amet venenatis urna cursus eget nunc scelerisque viverra mauris. Nunc sed velit dignissim sodales ut eu sem. Dictum varius duis at consectetur lorem donec massa. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at.</p>
</div>
<script src="script.js"></script>
</body>
</html>

您错过了一个应该停止的条件，因此您的html正文会无限增加。此外，没有必要把你的背景图像拉得那么低。

let city2 = document.getElementById('city-2');
let city3 = document.getElementById('city-3');
let header = document.getElementById('header');
window.addEventListener('scroll', function() {
const value = window.scrollY;
city2.style.top = Math.min(value * 0.5, city2.height) + 'px';
city3.style.top = Math.min(value * 1.2, city3.height) + 'px';
header.style.top = Math.min(value * 0.8, header.height) + 'px';
})

@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rancho&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Langar&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background: #fff;
min-height: 100hv;
}
#header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 30px 100px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 10000;
}
#header .logo {
color: #094b65;
font-weight: 700;
font-size: 2em;
text-decoration: none;
}
#header ul {
display: flex;
justify-content: center;
align-items: center;
}
#header ul li {
list-style: none;
margin-left: 20px;
}
#header ul li a {
text-decoration: none;
padding: 6px 15px;
color: #094b65;
border-radius: 20px;
}
#header ul li a:hover,
#header ul li a.active {
background: #094b65;
color: #fff;
}
section {
position: relative;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
section::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
/*background: linear-gradient(to top, #98A6B3,transparent);*/
z-index: 10;
}
section img {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
section #text {
position: absolute;
color: #094b65;
font-size: 10vw;
text-align: center;
line-height: 0.55em;
font-family: 'Rancho', cursive;
transform: translateY(-50%);
}
section #text span {
font-size: 0.20em;
letter-spacing: 2px;
font-weight: 400;
font-family: 'Poppins', sans-serif;
}
.sec {
position: relative;
padding: 100px;
background: #98A6B3;
}
.sec h2 {
font-size: 3.5em;
color: #fff;
margin-bottom: 10px;
}
.sec p {
font-size: 1em;
color: #fff;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header id="header">
<a href="#" class="logo">Logo</a>
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Menu</a></li>
</ul>
</header>
<section>
<img src="https://website-2.quintendesaever.repl.co/images/city-3.png" id="city-3">
<img src="https://website-2.quintendesaever.repl.co/images/city-2.png" id="city-2">
<img src="https://website-2.quintendesaever.repl.co/images/city-1.png" id="city-1">
</section>
<div class="sec">
<h2>Parallax Scrolling Effects</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras fermentum odio eu feugiat. Leo integer malesuada nunc vel risus commodo viverra maecenas accumsan. Mi tempus imperdiet nulla malesuada pellentesque. Urna molestie at elementum eu. Arcu cursus euismod quis viverra nibh cras pulvinar mattis. Ut faucibus pulvinar elementum integer enim neque volutpat. Elementum sagittis vitae et leo duis ut diam quam. Facilisis magna etiam tempor orci eu lobortis elementum nibh tellus. Non odio euismod lacinia at quis risus sed. Augue eget arcu dictum varius duis at consectetur lorem donec. Ut sem nulla pharetra diam. Integer feugiat scelerisque varius morbi enim nunc.<br><br>Vestibulum rhoncus est pellentesque elit. Lectus arcu bibendum at varius. Blandit cursus risus at ultrices. Est velit egestas dui id ornare arcu odio ut sem. Tempor orci eu lobortis elementum nibh. Pellentesque nec nam aliquam sem et tortor consequat id porta. Sed ullamcorper morbi tincidunt ornare massa eget egestas. Malesuada nunc vel risus commodo viverra maecenas accumsan lacus vel. Senectus et netus et malesuada fames. A pellentesque sit amet porttitor eget dolor morbi non arcu. Duis tristique sollicitudin nibh sit amet commodo nulla. Dictum varius duis at consectetur. Egestas quis ipsum suspendisse ultrices gravida dictum fusce ut. Sed augue lacus viverra vitae congue.<br><br>Gravida cum sociis natoque penatibus et magnis dis parturient. Duis ut diam quam nulla. Faucibus turpis in eu mi bibendum neque. Lorem ipsum dolor sit amet consectetur adipiscing elit ut aliquam. Commodo quis imperdiet massa tincidunt nunc pulvinar. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget egestas. Porttitor lacus luctus accumsan tortor posuere ac ut. Molestie at elementum eu facilisis sed odio morbi. Nec nam aliquam sem et tortor consequat. Faucibus interdum posuere lorem ipsum. Tincidunt lobortis feugiat vivamus at augue eget. Amet venenatis urna cursus eget nunc scelerisque viverra mauris. Nunc sed velit dignissim sodales ut eu sem. Dictum varius duis at consectetur lorem donec massa. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at.<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras fermentum odio eu feugiat. Leo integer malesuada nunc vel risus commodo viverra maecenas accumsan. Mi tempus imperdiet nulla malesuada pellentesque. Urna molestie at elementum eu. Arcu cursus euismod quis viverra nibh cras pulvinar mattis. Ut faucibus pulvinar elementum integer enim neque volutpat. Elementum sagittis vitae et leo duis ut diam quam. Facilisis magna etiam tempor orci eu lobortis elementum nibh tellus. Non odio euismod lacinia at quis risus sed. Augue eget arcu dictum varius duis at consectetur lorem donec. Ut sem nulla pharetra diam. Integer feugiat scelerisque varius morbi enim nunc.<br><br>Vestibulum rhoncus est pellentesque elit. Lectus arcu bibendum at varius. Blandit cursus risus at ultrices. Est velit egestas dui id ornare arcu odio ut sem. Tempor orci eu lobortis elementum nibh. Pellentesque nec nam aliquam sem et tortor consequat id porta. Sed ullamcorper morbi tincidunt ornare massa eget egestas. Malesuada nunc vel risus commodo viverra maecenas accumsan lacus vel. Senectus et netus et malesuada fames. A pellentesque sit amet porttitor eget dolor morbi non arcu. Duis tristique sollicitudin nibh sit amet commodo nulla. Dictum varius duis at consectetur. Egestas quis ipsum suspendisse ultrices gravida dictum fusce ut. Sed augue lacus viverra vitae congue.<br><br>Gravida cum sociis natoque penatibus et magnis dis parturient. Duis ut diam quam nulla. Faucibus turpis in eu mi bibendum neque. Lorem ipsum dolor sit amet consectetur adipiscing elit ut aliquam. Commodo quis imperdiet massa tincidunt nunc pulvinar. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget egestas. Porttitor lacus luctus accumsan tortor posuere ac ut. Molestie at elementum eu facilisis sed odio morbi. Nec nam aliquam sem et tortor consequat. Faucibus interdum posuere lorem ipsum. Tincidunt lobortis feugiat vivamus at augue eget. Amet venenatis urna cursus eget nunc scelerisque viverra mauris. Nunc sed velit dignissim sodales ut eu sem. Dictum varius duis at consectetur lorem donec massa. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at.</p>
</div>
<script src="script.js"></script>
</body>
</html>

相关内容

最新更新

热门标签：