スクロールで要素を動かすパララックス【JavaScript/jQuery】

この記事では、jQueryを使用して複数の要素にパララックス効果を実装する方法について解説します。実際のコード例とともに、スムーズなスクロールパララックスを作成する手順を紹介します。

スクロールで要素を動かすパララックスの実装例

jQueryを使用した、スクロールで要素を動かすパララックスの実装例です。

See the Pen
パララックス by りん@エンジニア (@rinblog0408)
on CodePen.

必要なライブラリを準備する

jQueryの導入

まず、jQueryを導入します。jQueryを使用することで、パララックス効果を実装するのに便利なメソッドやイベントを簡単に扱うことができます。以下のコードをHTMLファイルのhead要素内に追加します。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

パララックスを適用する要素の準備

パララックスを適用したい要素のクラスを設定する

パララックス効果を適用したい要素に対して、特定のクラスを設定します。例えば、パララックスを適用したい要素に”parallax-item”というクラスを追加します。以下のようにHTMLファイル内の該当する要素にクラスを設定します。

<div class="parallax-container">
  <div class="parallax-item1">コンテンツ1</div>
  <div class="parallax-item2">コンテンツ2</div>
  <div class="parallax-item3">コンテンツ3</div>
</div>

jQueryを使ってパララックスを実装する

スクロールイベントを監視してパララックスを適用するコード

以下のjQueryコードを使用して、スクロールイベントを監視し、パララックス効果を適用します。

$(window).on('scroll', function() {
  var scrollPosition = $(this).scrollTop();

  // パララックスを適用したい要素の動きを設定
  $('.parallax-item1').css('transform', 'translateY(' + scrollPosition * 0.4 + 'px)');
  $('.parallax-item2').css('transform', 'translateY(' + scrollPosition * 0.7 + 'px)');
  $('.parallax-item3').css('transform', 'translateY(' + scrollPosition * 0.1 + 'px)');
});