Parallax scrolling issue (infinite scrolling)
Question
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 answers
solution1
0 ACCPTED 2021-05-15 16:48:00
You missing a condition when it should stop, so your html body increasing infinitly. 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Parallax scrolling issue (JQuery)
Parallax scrolling(using JavaScript) issue
Parallax scrolling
parallax scrolling issue, using stellar.js
background position issue in parallax scrolling in javascript
parallax scrolling issue - div element jerking when scrolling in webkit browsers
Free scrolling and parallax issue (jQuery Scroll Path + Parallax)
Vertical Parallax scrolling in hotdot
Parallax scrolling in Safari on iOS
Image Parallax Scrolling Not Smooth
Related Tags