javascript - 如何在垂直页面滚动上水平动画图像

Question

当用户向下滚动时，我正在使用 JS 在页面部分之间水平移动图像。我的方法是将它们设置margin-left为window.scrollY. 但是，正如您在我的 CodePen 链接中看到的那样，这意味着第二张图像在激活时会赶上第一张图像的水平位置。我希望每个滑块图像都是独立的，以便每个滑块以相对于它们在页面上的顺序不同的速度从页面右侧流出。谁能给我一个关于如何思考这个问题的提示？

// 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>

标签： javascriptanimation