视差双向滚动

Question

我在jQuery的帮助下创建了一个水平滚动器。我现在希望每个缩略图下的标题在两个方向上都具有较小的视差效果。它正在起作用，但仅在一个方向上起作用。

我通过$(document).scrollTop()实现了这一目标，并通过jQuery将输出粘贴到CSS中：

var width = $(".horizontalScroller").width() - $(window).width() + $(window).height();

$("body").css("height", width);

$(document).on("scroll", function() {

  var pixels = $(document).scrollTop();

  $(".horizontalScroller").css("left", -1 * pixels);

  $(".info").css({
    "margin-left": -0.5 * pixels
  });

  setTimeout(function() {
    $(".info").css({
      transition: "all 1s",
      "margin-left": "0",
    });
  });
});

您可以在这里看到我到目前为止的情况：

https://codepen.io/Dennisade/pen/BMVVMr

我也希望效果也可以相反。我还注意到，滚动越远，效果越好。也许有人有完全不同的解决方案来使这种平滑化。

在此感谢您的帮助。