【jQuery】背景画像を background-position: center; からパララックス

やりたいこと

ページタイトルの背景に画像を敷いて、ちょっとだけパララックスしたい。

条件

背景画像の初期位置はbackground-potition: center;。

結論

【HTML】

<div class="main-img-area">
	<h1>ページタイトル</h1>
</div>

【CSS】

.main-img-area {
	height: 560px;
	background-image: url(../images/main_img.jpg);
	background-repeat: no-repeat;
  	background-size: cover; /* 場合により150%など */
  	background-position: center calc(50% - 0px); /* ここがポイント */
	/* 以下はページタイトルのセンター寄せのための記述 */
	display: flex;
	align-items: center;
	justify-content: center;
}

【jQuery】

$(window).on('scroll', function(){
	var scrollTop = $(window).scrollTop();
	var bgPosition = scrollTop / 10; //値を大きくすると移動距離が小さくなる

	if(bgPosition){
		$('.main-img-area').css('background-position', 'center calc(50% - '+ bgPosition + 'px)');
	}
});

解説

最初に参考にしたページではbackground-potition: center top;を基準位置としてそこからのオフセットだったのだけど、画像の基準位置は中央にしたかったんです。

ただ、centerからのオフセットは効かない様子。（background-potition: center center -10px;はダメ）

それで2つめのサイトを参考に、2つ目のcenterをcalc(50% - 0px)に置き換えて、CSSとjQueryを修正するとできました。

画像や表示エリアの縦横比によってはスクロールすると画像が切れてしまう（尺が足りない）感じになってしまうので、その場合はbackground-sizeをcoverでなく150%とかにすると良さそう。