BLOG

jQueryだけで完結！CSS最小限パララックスエフェクト入門

プラグイン不要、CSSは高さ指定だけ。
すべてのパララックスロジックを jQuery で完結させる
超シンプル実装をご紹介します。
スクリプトをコピーするだけで、自分のサイトにすぐ組み込めます！

0. 事前準備 — jQuery の読み込み

このパララックススクリプトは jQuery に依存しています。
以下のように、スクリプトタグで jQuery を先に読み込むのを忘れないでください。 

<script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
        crossorigin="anonymous"></script>

1. HTML＋最小CSSの準備

パララックス対象要素に .parallax-obj を付与し、CSSでは高さを指定するだけでOKです。 

<div class="wrap">
  <div class="parallax-obj">
    <img src="path/to/image.jpg" alt="" />
  </div>
</div>

<style>
.parallax-obj {
  height: 400px; /* お好みの表示領域の高さを指定 */
}
</style>

2. jQueryスクリプト全体

スクロール量と要素位置を計算し、translateYで背景を動かします。 

jQuery(function() {
  var $target = jQuery('.parallax-obj');
  if (!$target.length) return;

  // 親要素と子要素の初期設定
  $target.css({overflow:'hidden',position:'relative',width:'100%'});
  $target.children('*').css({position:'absolute',top:'50%',objectFit:'cover',width:'100%'});

  // 初回実行とイベント登録
  parallaxEffect();
  jQuery(window).on('scroll resize', parallaxEffect);

  function parallaxEffect(){
    var yScroll = jQuery(window).scrollTop(),
        winH    = jQuery(window).height(),
        winCen  = yScroll + winH / 2;

    $target.each(function(){
      var $el      = jQuery(this),
          elTop    = $el.offset().top,
          elH      = $el.outerHeight(),
          elCen    = elTop + elH / 2,
          speed    = 0.5,
          offsetY  = (elCen - winCen) * -speed,
          childH   = (winH + elH) / 2;

      $el.children('*').css({
        transform: 'translateY(calc(-50% + ' + offsetY + 'px))',
        height: childH + 'px'
      });
    });
  }
});

3. ロジック解説ポイント

  • 高さ指定だけ：CSSは .parallax-obj { height:… } のみ
  • 親要素設定：overflow:hidden・position:relative・width:100%
  • 子要素設定：position:absolute・top:50%・object-fit:cover・width:100%
  • 中心差分計算：要素中心 – 画面中心 の差 × 速度係数
  • translateY：calc(-50% + offsetY) で上下パララックス

4. カスタマイズ例

  • 速度調整：speed の数値を変えると動きの速さが変化
  • 方向反転：offsetY の符号を反転すると上下逆方向に
  • 高さ可変：.parallax-obj の高さを % や vw に変更

5. パフォーマンス改善のコツ

  • throttle/debounce：スクロールイベントの呼び出し頻度を制限
  • requestAnimationFrame：ブラウザ最適なタイミングで再描画
  • 対象要素の絞り込み：大量要素ではなく主要セクションに限定

まとめ

CSSは最小限、ロジックは jQuery で一元管理することで、
プラグイン不要・軽量なパララックスを実装できました。
コピペで試して、自分のサイトに合わせてアレンジしてみてください！

ご相談ください

より高度なアニメーションや、ヘッドレスCMSとの組み合わせなど、
専門的な実装は山キノコロリ WEB事業部にお任せください。
▶ お問い合わせフォーム

BACK