javascript - 滚动一定量后粘在文本上的水平视差

Question

我正在尝试创建一种文本效果，您可以在其中滚动，文本从屏幕外移到中心并固定在该位置。我对 JS 很陌生，我尝试重新创建下面的 codepen 链接，但总是出错，所以我将使用原始的作为示例。

尽管使用图像完成，但这几乎是我的意思（示例）的完美示例。我希望船移动到页面的中心并在那之后有一个绝对位置，这意味着如果我决定返回，我希望它与页面一起上升。

我确定在图像上完成代码后，我可以将其复制并更改为文本，对吗？

到目前为止我的尝试-> codepen.io

HTML：

<div class="section">
  Scroll down to see the effect
</div>
<div class="section bg-static">
  <div class="bg-move"></div>
</div>
<div class="section">
  The boat image is moving only when scrolling. 
</div>

CSS：

body {
  font-size: 1.5em;
  font-family: Arial, Helvetica, sans-serif;
}
.section {
  position: relative;
  max-width: 920px;
  min-height: 75vh;
  padding: 40px;
  margin: auto;
  background-color: #48c9b0;
  color: #ffffff;
}
.section.bg-static {
  background-color: #85c1e9;
  background-image: url("https://www.dropbox.com/s/v4u0mpzfplgjxaq/img-blog-background-move- 
 scrolling-bg.png?raw=1");
  background-size: cover;
  background-position: center;
}
.section .bg-move {
  position: absolute;
  top: 0;
  bottom: 0;
  right: auto;
  width: 100%;
  background-image: url("https://www.dropbox.com/s/isdqow2394y3t35/img-blog-background-move- 
scrolling-boat.png?raw=1");
  background-size: cover;
  background-position: center;
}

JS：

$(window).on("load resize scroll", function() {
  $(".bg-static").each(function() {
    var windowTop = $(window).scrollTop();
    var elementTop = $(this).offset().top;
    var leftPosition = windowTop - elementTop;
      $(this)
        .find(".bg-move")
        .css({ left: leftPosition });
  });
});

标签： javascriptcssparallaxhorizontal-scrolling