如何在垂直页面滚动上水平设置图像动画

Question

当用户向下滚动时，我正在使用JS在页面部分之间水平移动图像。我的方法是将其margin-left设置为等于window.scrollY。但是，as you can see in my CodePen link表示第二个图像在激活时会赶上第一个图像的水平位置。我希望每个滑块图像都是独立的，以便每个滑块图像相对于其在页面上的顺序以不同的速度从页面右侧流出。谁能给我提示如何思考这个问题？

// this snippet controls how often the function runs, so that it doesn't run an insane amount of times
function debounce(func, wait = 2, immediate = true) {
  var timeout;
  return function() {
    var context = this,
      args = arguments;
    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
}

const sliders = document.querySelectorAll(".sliders");

function checkSlide(e) {
  sliders.forEach(slider => {

    // my console logs
    // console.log(window.innerHeight)

    // halfway through the image, start
    const slideInAt =
      window.scrollY + window.innerHeight - slider.height / 1

    // bottom of the image, 
    const imageBottom = slider.offsetTop + slider.height;

    // 
    const isHalfShown = slideInAt > slider.offsetTop;

    const isNotScrolledPast = window.scrollY < imageBottom;

    if (isHalfShown && isNotScrolledPast) {
      // sliderImage.classList.add("active");
      slider.style.marginLeft = (window.scrollY) + "px"
    } else {
      // sliderImage.classList.remove("active");
      slider.style.marginLeft = "0px"
    }
  });
}

window.addEventListener("scroll", debounce(checkSlide))

.frame {
  background-color: lightgray;
  width: 500px;
  /*height: 200vh;*/
  margin: auto;
  padding: 20px;
}

.scrollImage {
  width: 70px;
  height: 70px;
  margin: 5px;
  mix-blend-mode: darken;
}

<div class="frame">
  <h1>Welcome</h1>
  <p>Consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur
    pariaturlores sunt esse magni, ut, dignissimos.</p>
  <p>Lorem ipsum cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni,
    ut, dignissimos.</p>
  <p>Adipisicing elit. Tempore tempora rerum..</p>
  <p>Consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur
    pariaturlores sunt esse magni, ut, dignissimos.</p>

  <img src="https://image.freepik.com/free-icon/sail-boat_318-1522.jpg" class="scrollImage sliders" />

  <p>Lorem ipsum cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni,
    ut, dignissimos.</p>
  <p>Adipisicing elit. Tempore tempora rerum..</p>

  <img src="https://image.freepik.com/free-icon/sail-boat_318-1522.jpg" class="scrollImage sliders" />

</div>