こんにちは、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 | 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;
}

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

最後に

いかがでしたでしょうか。

本記事では概要だけを簡単にご紹介しましたが、CSSやスクリプトの一部をカスタマイズすることでさらに違ったパララックス効果をつけることができますので、ぜひ色々なプロパティで試してみてくださいね。

以上、jQueryでスクロールに合わせて背景画像の位置を動かす方法のご紹介でした!