视差滚动问题（无限滚动）
[英]Parallax scrolling issue (infinite scrolling)
问题描述
I don't have any experience, just messing around with some code.
我没有任何经验，只是弄乱了一些代码。 I am trying to make a parallax page, there are three rows of buildings layered on top of eachother.我正在尝试制作视差页面，三排建筑物相互重叠。 (The first layer moves up, the second layer moves down and the third layer also moves down but faster). （第一层向上移动，第二层向下移动，第三层也向下移动，但速度更快）。 At first everything goes well but if I scroll to the bottom of the page the last row of buildings keeps moving down infinitly.起初一切顺利，但如果我滚动到页面底部，最后一排建筑物会无限向下移动。 Is there a way to stop it from moving?有没有办法阻止它移动？
here is the full code;这是完整的代码；
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>
1 个解决方案
解决方案1
0 已采纳 2021-05-15 16:48:00
You missing a condition when it should stop, so your html body increasing infinitly.您错过了应该停止的条件，因此您的 html 主体无限增加。 Also there is no need to pull your background images that far down.也没有必要把你的背景图片拉得那么远。
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
视差滚动问题（JQuery） - Parallax scrolling issue (JQuery)
视差滚动（使用JavaScript）问题 - Parallax scrolling(using JavaScript) issue
视差滚动 - Parallax scrolling
使用stellar.js的视差滚动问题 - parallax scrolling issue, using stellar.js
javascript中视差滚动的背景位置问题 - background position issue in parallax scrolling in javascript
视差滚动问题 - 在webkit浏览器中滚动时div元素抖动 - parallax scrolling issue - div element jerking when scrolling in webkit browsers
免费滚动和视差问题（jQuery Scroll Path + Parallax） - Free scrolling and parallax issue (jQuery Scroll Path + Parallax)
Hotdot中的垂直视差滚动 - Vertical Parallax scrolling in hotdot
在iOS上的Safari中视差滚动 - Parallax scrolling in Safari on iOS
图像视差滚动不平滑 - Image Parallax Scrolling Not Smooth
相关标签