¡Soy un principiante en programación y quiero completar un efecto ahora! Cuando el mouse se desplaza hacia abajo, los elementos en la pantalla seguirán el desplazamiento de la posición, y cuando el mouse se desplaza hacia arriba nuevamente, los elementos también se desplazarán a la posición original. Sin embargo, cuando se detiene el mouse, la posición no debe cambiarse continuamente para lograr un efecto de paralaje de desplazamiento.
Pero en este momento, el efecto que estoy tratando de lograr es dar una posición de desplazamiento fija duck.style.transform = 'translateY(100px)'; esto hará que el elemento se mueva cuando el mouse no se esté desplazando. ¿Como puedo solucionar este problema? ?
El efecto deseado es algo así como este ejemplo de URL a continuación https://codepen.io/hong-wei/pen/rNGbgKQ?editors=1010
let duck = document.querySelector(".duck"); let cloud1 = document.querySelector(".cloud1"); let cloud2 = document.querySelector(".cloud2"); let cloud3 = document.querySelector(".cloud3"); $(document).on("scroll", function() { if (window.pageYOffset > 0) { duck.style.transform = "translateY(100px)"; cloud1.style.transform = "translateY(120px)"; cloud2.style.transform = "translateY(80px)"; cloud3.style.transform = "translateY(60px)"; // duck.style.transition = '2s'; } else { duck.style.transform = "translateY(-100px)"; cloud1.style.transform = "translateY(-120px)"; cloud2.style.transform = "translateY(-80px)"; cloud3.style.transform = "translateY(-60px)"; } }); .wrap { position: relative; background-color: #222; height: 1000px; } .wrap .duck { width: 300px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: 1s; } .wrap .cloud1 { position: absolute; top: 60px; width: 360px; left: 30px; transition: 2s; } .wrap .cloud2 { position: absolute; top: 200px; right: 100px; width: 160px; transition: 2s; } .wrap .cloud3 { position: absolute; top: 320px; width: 560px; transition: 2s; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrap"> <img class="duck" src="https://upload.cc/i1/2022/02/15/UB1kXd.png " alt=""> <img class="cloud1" src="https://upload.cc/i1/2022/02/19/7P4hcu.png " alt=""> <img class="cloud2" src="https://upload.cc/i1/2022/02/19/7P4hcu.png " alt=""> <img class="cloud3" src="https://upload.cc/i1/2022/02/19/7P4hcu.png " alt=""> </div>Esperemos que esto solucione su problema.
let duck = document.querySelector(".duck"); let cloud1 = document.querySelector(".cloud1"); let cloud2 = document.querySelector(".cloud2"); let cloud3 = document.querySelector(".cloud3"); window.addEventListener("scroll", function() { let rate = window.scrollY * 1; let rateCloudsPositive = window.scrollY * 3; let rateCloudsNegative = window.scrollY * -3; duck.style.transform = `translateY(${rate}px)`; cloud1.style.transform = `translateY(${rateCloudsPositive}px)`; cloud2.style.transform = `translateY(${rate}px)`; cloud3.style.transform = `translateY(${rate}px)`; // duck.style.transition = '2s'; duck.style.transform = `translateY(${rateCloudsNegative}px)`; cloud1.style.transform = `translateY(${rateCloudsNegative}px)`; cloud2.style.transform = `translateY(${rateCloudsNegative}px)`; cloud3.style.transform = `translateY(${rateCloudsNegative}px)`; });