視差滾動問題（無限滾動）
[英]Parallax scrolling issue (infinite scrolling)
問題描述
我沒有任何經驗，只是弄亂了一些代碼。 我正在嘗試制作視差頁面，三排建築物相互重疊。 （第一層向上移動，第二層向下移動，第三層也向下移動，但速度更快）。 起初一切順利，但如果我滾動到頁面底部，最后一排建築物會無限向下移動。 有沒有辦法阻止它移動？
這是完整的代碼；
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
您錯過了應該停止的條件，因此您的 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>
視差滾動問題 - 在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)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.