【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の値を動的に変更させています。

サンプル

コメント

タイトルとURLをコピーしました