Estoy tratando de crear un efecto de paralaje en la imagen de fondo cuando muevo el control deslizante. Decidí simplemente cambiar la posición del fondo en la imagen, pero no estoy del todo seguro de que sea una buena solución. Dígame cómo mejorar dicho efecto para que la imagen en el fondo se mueva más suavemente, por lo que realmente se llama paralaje.
const p = document.getElementById("price"); const bg = document.getElementById("bg"); p.addEventListener("input", function() { bg.style.backgroundPosition = `${p.value}% 50%`; }, false); .parent { display: flex; width: 500px; height: 300px; justify-content: center; align-items: center; background-image: url('https://wallpaperaccess.com/full/99840.jpg'); background-size: cover; background-repeat: no-repeat; } .child { width: 50%; background-color: #fff; padding: 5%; } <input id="price" type="range" value="" /> <div class="parent" id="bg"> <div class="child"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam officia voluptatem, sint voluptatibus. Cumque vel voluptatem voluptatibus quisquam corporis nam, fugit maxime, architecto similique natus, ipsam enim eveniet recusandae odio. </div> </div>