WEBOPIXEL

jQueryでスクロール量に応じて拡大するヒーローイメージ

Posted: 2016.12.28 / Category: javascript / Tag: 

最近はトップページでメインビジュアルを画面いっぱいに表示することが多いですよね。
ヒーローイメージというらしいですが、今回はjQueryを使用してスクロール量に応じて画像を拡大する方法をご紹介します。

Sponsored Link

HTML

画像はCSSので配置するのでscale-bgというクラス名の空のdivを配置します。
fixedで固定表示するので他の要素とは別にしておきます。

HTML

<div class="scale-bg"></div>
<h1>Title</h1>
<div class="contents">
・・・
</div>

CSS

scale-bg に fixed、contents に relative を指定して位置を調節します。

CSS

.scale-bg {
	background: url(bg.jpg) no-repeat top center;
	background-size: 100%;
	position: fixed;
	width: 100%;
	padding-bottom: 400px;
}
h1 {
	position: absolute;
	top: 272px;
}
.contents {
	position: relative;
	top: 400px;
	padding: 60px 0;
}

jQuery

jQueryではscrollイベントでscale-bgのbackgroundSizeとtopの数値を加算するだけですね。

JavaScript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
	$(window).scroll(function() {
		var scroll = $(window).scrollTop();
		$('.scale-bg').css({
			backgroundSize: (100 + scroll/3)  + "%",
			top: -(scroll/10)  + "%"
		});
	});
});
</script>