【jQuery/css】スクロールすると背景画像も少しずつ動かす方法

今回はスクロールすることによって表示されている背景画像も少しずつ動かす方法について紹介していきたいと思います。

プラグインを使う方法もありますがプラグインを使わずにjQueryとcssのみで再現していきます。

スクロールで背景画像も動かす

スクロールすることによって背景画像も少しずつ移動していく方法になります。

背景画像を動かしたときに画像が切れてしまわないようにbackground-sizeは大きめに設定しておきます。

html

<div class="box">
	<p>タイトル</p>
</div>

css

.box{
	position: relative;
	width: 100%;
	height: 600px;
	background-image: url(img/img.jpg);
	background-repeat: no-repeat;
	background-size: 200%;
	background-position: center top;
}

.box p{
	margin: 0;
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

jQuery

jQuery(window).on('scroll', function(){
  var stp = jQuery(window).scrollTop();
  var bgp = stp / 2;

  if(bgp){
    jQuery('.box').css('background-position', 'center top -'+ bgp + 'px');
  }
});

処理としてはスクロールさせるごとにbackground-positionの値を動的に変更させています。

サンプル