jQuery中的分层图像视差效果

Question

我想开发以下视差效果：

我被困住了，这是我到目前为止所拥有的：

$(document).ready(() => {
  let scrollTimerId;
  const numItems = $('.layers__img').length;
  $(window).scroll(() => {
    if (!scrollTimerId) $('.layers__img').addClass('scrolling');

    clearTimeout(scrollTimerId);
    scrollTimerId = setTimeout(() => {
      $('.layers__img').removeClass('scrolling');
      scrollTimerId = undefined;
    }, 150);
  });

});

.layers {
  height: 100%;
}

.layers #layer-1.scrolling {
  transform: translateY(-11%);
  transition: transform 0.5s ease-in;
  transition-delay: 0.1s;
}

.layers #layer-2.scrolling {
  transform: translateY(-14%);
  transition: transform 0.5s ease-in;
  transition-delay: 0.2s;
}

.layers #layer-3.scrolling {
  transform: translateY(-19%);
  transition: transform 0.5s ease-in;
  transition-delay: 0.3s;
}

.layers #layer-4.scrolling {
  transform: translateY(-26%);
  transition: transform 0.5s ease-in;
  transition-delay: 0.4s;
}

.layers #layer-5.scrolling {
  transform: translateY(-35%);
  transition: transform 0.5s ease-in;
  transition-delay: 0.5s;
}


.layers__img {
  position: relative;
  top: 0;
  transition: transform 0.5s ease-in;
  transition-delay: 0.2s;
}

.layers__img:not(:first-child) {
  margin-top: -30%;
}

.layers .scrolling {
  position: relative;
}

.layers .scrolling img {
  transition: transform 0.5s ease-in;
  animation: 0.5s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="layers" class="layers">
  <div class="layers__img layer-1" id="layer-1">
    <img src="https://picsum.photos/200/300?random=1">
  </div>
  <div class="layers__img layer-2" id="layer-2">
    <img src="https://picsum.photos/200/300?random=3">
  </div>
  <div class="layers__img layer-3" id="layer-3">
    <img src="https://picsum.photos/200/300?random=2">
  </div>
  <div class="layers__img layer-3" id="layer-4">
    <img src="https://picsum.photos/200/300?random=4">
  </div>
  <div class="layers__img layer-3" id="layer-5">
    <img src="https://picsum.photos/200/300?random=5">
  </div>
</div>

我的解决方案没有相同的行为，因此我需要有人给我一些想法，以了解如何从gif中实现行为。与gif中一样，图像会根据滚动方向在顶部和底部平滑滚动。

P.S。我正在将SCSS用于CSS，这就是为什么它看起来有些混乱的原因。