スクロールで要素を動かすパララックスの実装方法【CSS/jQuery】

スクロールに合わせて要素を動かすパララックス効果の実装方法を解説します。

結論から書くと、いま新しく作るなら animation-timeline: scroll() を使ったCSSだけの実装がいちばん軽く、滑らかです。JavaScriptを1行も書かずに済みます。

既存サイトにjQueryが入っている場合や、細かい条件分岐が必要な場合は、この記事のjQuery版が使えます。ただしスクロールイベントで直接スタイルを書き換える実装は、そのままだとカクつきます。対処法もあわせて解説します。

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

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

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

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

jQueryの導入

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

<script src="https://code.jquery.com/jquery-3.7.1.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() {
  const 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)');
});

このままだとカクつく理由

結論：スクロールイベントは1回のスクロールで何十回も発火します。そのたびにスタイルを書き換えると、描画が追いつかなくなります。

対処は2つあります。スクロール中は座標を控えるだけにして、実際の書き換えは requestAnimationFrame でフレームに合わせて行います。

let scrollPosition = 0;
let ticking = false;

function update() {
  $('.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)');
  ticking = false;
}

$(window).on('scroll', function() {
  scrollPosition = $(this).scrollTop();
  if (!ticking) {
    requestAnimationFrame(update);
    ticking = true;
  }
});

ticking のフラグで、1フレームにつき1回だけ更新するようにしています。これが無いと、requestAnimationFrame がスクロールの回数だけ積み上がります。

素のJavaScriptで書く場合は、リスナーに { passive: true } を付けてください。スクロールを止めずに処理できるようになります。

window.addEventListener('scroll', onScroll, { passive: true });

CSSだけでパララックスを作る

結論：animation-timeline: scroll() を使うと、スクロール量に連動したアニメーションをCSSだけで書けます。JavaScriptのカクつき対策そのものが不要になります。

@keyframes parallax-slow {
  from { transform: translateY(0); }
  to   { transform: translateY(200px); }
}

.parallax-item1 {
  animation: parallax-slow linear;
  /* 時間ではなくスクロール量で進める */
  animation-timeline: scroll();
}

動く量を要素ごとに変えれば、奥行きのある見え方になります。@keyframes の移動量を変えるだけです。

この方法はブラウザの合成処理だけで動くため、他の処理が重くてもカクつきません。スクロールイベントのようにメインスレッドを使わないためです。

対応は Chrome・Edge 115以降と Safari 18以降で、Firefox は2026年9月時点でまだ既定で無効です。@supports で分岐させてください。

@supports (animation-timeline: scroll()) {
  .parallax-item1 {
    animation: parallax-slow linear;
    animation-timeline: scroll();
  }
}

動きを減らす設定への配慮も必ず入れてください。パララックスは乗り物酔いのような症状を引き起こすことがあり、この配慮が特に重要な表現です。

@media (prefers-reduced-motion: reduce) {
  .parallax-item1,
  .parallax-item2,
  .parallax-item3 {
    animation: none;
    transform: none;
  }
}

まとめ

結論：新しく作るならCSSの animation-timeline、既存サイトに足すならjQuery版に requestAnimationFrame を組み合わせてください。

▼実装方法の比較

同じ animation-timeline を使う実装は、スクロールに応じて色を変える方法5つと画像にスクロール連動アニメーションを付ける方法でも扱っています。