【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%とかにすると良さそう。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

よく読まれている記事

タグリスト

Advanced Custom Fields bbPress Bogo CSS Googleストリートビュー https Instagram Graph API JavaScript jQuery Lazy Blocks Scratch ScratchJr Shopify Viscuit WordPress カスタムブロック サーバ サーバー ドメイン フリーランス プラグイン プログラミング教育 マルチサイト 仕事場 在宅