【jQuery】簡単！縦スクロールに合わせて要素を横に動かす方法

<div class="container">
  <div class="parallax-x -left"></div>
  <div class="parallax-x -right"></div>
  <div class="parallax-x -left"></div>
  <div class="parallax-x -right"></div>
  <div class="parallax-x -left"></div>
  <div class="parallax-x -right"></div>
</div>

// ウィンドウがスクロールされたときのイベントを設定します
$(window).on("scroll", function () {
  // 現在のスクロール位置を取得します
  const scrollPosition = $(window).scrollTop();
  // ドキュメントの最大のスクロール可能な位置を計算します
  const maxScroll = $(document).height() - $(window).height();
  // スクロールの進捗をパーセンテージとして計算します
  const scrollPercentage = scrollPosition / maxScroll;

  // ".parallax-x.-left" クラスを持つ各要素に対して処理を行います
  $(".parallax-x.-left").each(function () {
    // 横方向の移動速度を設定します
    const speed = 5;
    // 移動する距離を計算します
    const translateXValue = scrollPercentage * ($(this).width() * speed);
    // 要素を左方向に移動させるスタイルを適用します
    $(this).css("transform", `translateX(-${translateXValue}px)`);
  });

  // ".parallax-x.-right" クラスを持つ各要素に対して処理を行います
  $(".parallax-x.-right").each(function () {
    // 横方向の移動速度を設定します
    const speed = 5;
    // 移動する距離を計算します
    const translateXValue = scrollPercentage * ($(this).width() * speed);
    // 要素を右方向に移動させるスタイルを適用します
    $(this).css("transform", `translateX(${translateXValue}px)`);
  });
});