为多个横幅添加视差效果

Question

我有5个横幅，我想添加一个平移/视差效果。我正在使用translate transform来缓慢地移动横幅的背景图像对着横幅顶部的文本。我现在使用的javascript完美地用于第一个横幅图像，但是导致视差效果对于剩余的横幅来说太早开始，这导致其他横幅图像向下移动太多。当我向下滚动它们时，如何让剩余的横幅开始翻译效果？

HTML：

<section class="banner-1">
     <div class="hero-bg"></div>
     <div class="container">
         <div class="row">
             <h1>Lorem Ipsum</h1>
         </div>
     </div>
</section>

<section class="banner-2">
     <div class="hero-bg"></div>
     <div class="container">
         <div class="row">
             <h1>Lorem Ipsum</h1>
         </div>
     </div>
</section>

<section class="banner-3">
     <div class="hero-bg"></div>
     <div class="container">
         <div class="row">
             <h1>Lorem Ipsum</h1>
         </div>
     </div>
</section>

JS：

$(window).scroll(function (event) {
    var scrollPos = $(this).scrollTop();
    var calc = String(scrollPos/10);

    if (scrollPos > lastScrollTop) {
        $(".hero-bg").css({
            transform: 'translate3d(0px,'+calc+'px, 0)'
        });
    } 
    else {
        $(".hero-bg").css({
            transform: 'translate3d(0px,'+calc+'px, 0)'
        });
    }

    lastScrollTop = scrollPos;
});