【jQuery】スクロールに合わせて背景画像の位置を動かす方法【パララックス】

こんにちは、Ryohei（@ityryohei）です！

本記事では、スクロールに合わせて背景画像の位置を動かす方法をご紹介しています。

プラグイン等は使用したくないけれど、スクロール時にシンプルなパララックス効果を付けたい方におすすめです！

では、解説していきます。

スクロールに合わせて背景画像を縦方向に動かす

下記はスクロールに合わせて背景画像を動かした際のデモになります。埋め込みなのでわかりにくいかもしれないですが、スクロールすると背景画像が少しずつ動きます。

DEMO

See the Pen Backgoround Image Scroll1-1 | jQuery by ryohei (@intotheprogram) on CodePen.

処理内容としては、スクロールした際に背景画像の表示位置を設定するbackground-positionの値を動的に変更することで実現しています。

下記はデモに使用しているソースです。実装を検討されている場合は参考にしていただければと思います。

HTML

<div id="app">
    <h1>DEMO</h1>  
</div>

CSS

#app {
    width: 100%;
    height: 100vh;
    background-image: url(https://picsum.photos/id/163/900/400);
    background-repeat: no-repeat;
    background-size: 150%;
    background-position: center top;
}

JS

$(window).on('scroll', function(){

  var scrollTop = $(window).scrollTop();
  var bgPosition = scrollTop / 2; //スクロール後のポジションを指定（値を大きくすると移動距離が小さくなる）

  if(bgPosition){
    $('#app').css('background-position', 'center top -'+ bgPosition + 'px');
  }
});

実装する際のアドバイスとしましては、スクロールした後に背景画像が切れて表示されないよう下記のポイントに注意しましょう。

背景画像はbackground-size: 150%;のように大きいサイズを指定する

画像が切れて単色の背景が表示されないようにするための処置です。もちろん意図的に単色の背景を表示させる場合は適切なサイズに設定してください。

また、上記ではスクロールと同時に背景画像を動かしましたが、スクロールと同時に背景画像が移動するとパララックスがわかりにくい！　という場合はtransitionで緩急をつけてあげると良いかもしれません。

transitionで緩急をつけてみる

下記はtransitionで緩急をつけた際のデモです。スクロール後に少し時間をおいてゆっくりと背景画像が動くようになります。

DEMO

See the Pen Backgoround Image Scroll1-2 | jQuery by ryohei (@intotheprogram) on CodePen.

指定方法も簡単でtransitionにbackground-positionを指定するだけになります。

#app {
    width: 100%;
    height: 100vh;
    background-image: url(https://picsum.photos/id/163/900/400);
    background-repeat: no-repeat;
    background-size: 150%;
    background-position: center top;
    
    //追加
    transition-property: background-position;
    transition-duration: .7s;
    transition-delay: .035s;
}

これだけで少しリッチな動きになります。それぞれの値はお好みでご変更ください。

続いて横方向に動かす場合の実装方法をご紹介しています。内容はほとんど同じなので、駆け足でご紹介させていただきます。

スクロールに合わせて背景画像を横方向に動かす

下記はスクロールに合わせては家形画像を横方向に動かした際のデモになります。

DEMO

See the Pen Backgoround Image Scroll2-1 | jQuery by ryohei (@intotheprogram) on CodePen.

前項でご紹介した内容を一部変更するだけで実装することができます。変更する箇所はCSSのbackground-positionとJSの箇所になります。

HTML

<div id="app">
    <h1>DEMO</h1>  
</div>

CSS

#app {
    position: relative;
    width: 100%;
    height: 100vh;
    background-image: url(https://picsum.photos/id/163/900/400);
    background-repeat: no-repeat;
    background-size: 150%;
    background-position: center left; //横方向ではleftかrightを使用
}

JS

$(window).on('scroll', function(){

  var scrollTop = $(window).scrollTop();
  var bgPosition = scrollTop / 2; //スクロール後のポジションを指定（値を大きくすると移動距離が小さくなる）

  if(bgPosition){
    $('#app').css('background-position', 'center left -'+ bgPosition + 'px');
  }
});

transitionで緩急をつけてみる

DEMO

See the Pen Backgoround Image Scroll2-2 | jQuery by ryohei (@intotheprogram) on CodePen.

#app {
    width: 100%;
    height: 100vh;
    background-image: url(https://picsum.photos/id/163/900/400);
    background-repeat: no-repeat;
    background-size: 150%;
    background-position: center left;
    
    //追加
    transition-property: background-position;
    transition-duration: .7s;
    transition-delay: .035s;
}

以上がスクロールに合わせて背景画像を横方向に動かす方法になります。