Soy un principiante de Javascript. Recientemente, vi un sitio web con un efecto de paralaje de desplazamiento. Cuando el mouse se desplaza, las imágenes se superpondrán y se moverán, al igual que el efecto de este sitio web.
sitio web de ejemplo: http://www.firewatchgame.com/
let scrollH; let photo1 = document.querySelector(".photo1"); let photo2 = document.querySelector(".photo2"); let photo3 = document.querySelector(".photo3"); document.addEventListener("scroll", function () { scrollH = window.pageYOffset; if (scrollH > 300) { photo1.style.transform = "translateY(-50px)"; } if (scrollH > 300) { photo2.style.transform = "translateY(-100px)"; } if (scrollH > 500) { photo3.style.transform = "translateY(-190px)"; } console.log(scrollH); }); body{ background-color: #AEFEFF; height: 2000px; } container{ position:relative; margin-top: 500px; width: 100%; display: flex; } .photo1{ position: absolute; top:90px; left:20%; width: 600px; height: 200px; background-color: #FFEEAD; transform:translate3d(0px, -10, 0px)); z-index:1; } .photo2{ position:absolute; top:30%; right:10%; width: 800px; height: 200px; background-color: #D9534F; transform:translate3d(0px, 390px, 0px)); z-index:2; } .photo3{ position:absolute; top:50%; width: 900px; height: 300px; border-radius:300px; background-color: #96CEB4; transform:translate3d(0px, 960px, 0px)); z-index:3; } <div class="container"> <div class="photo1"></div> <div class="photo2"></div> <div class="photo3"></div> </div>] 1
También traté de hacer uno yo mismo, ¡solo usaré la forma más fácil! Pero ahora tengo un problema cuando la página web se desplaza, el elemento se mueve, pero quiero que el elemento vuelva al lugar original cuando la página web se desplaza, pero no sé cómo lograr tal efecto, yo No sé si me puede proporcionar para ayudar a modificar este programa.
O si ha hecho un efecto similar y tiene una mejor manera de escribirlo, por favor compártalo conmigo, gracias.
Prueba esto
use "photo" as a class for all the photos then add this line of code if(scrollH>300) $('.photo').css("position", "fixed")