I am trying to create a parallax effect on the background image when I move the slider. I decided to just change the position of the background on the image, but I'm not entirely sure that's a good solution. Please tell me how to improve such an effect so that the picture on the background moves more smoothly, so that it is really called parallax.
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>