【jQuery＆CSS3】要素の位置までスクロールすると背景をパタンとアニメーション表示する方法

f:id:northgeek:20160522214010j:plain

Webサイト制作時に使えるTips系の記事になります。

Web制作の担当ディレクターから「カッコイイ動きない？」と言われることがあるのですが、そのときよく提案する「スクロールして要素の表示位置まで到達したら背景をおしゃれにアニメーション表示する」という動きを紹介。

早速ですが、まずは下記のDemoを御覧ください。

ソース
- 解説
- カスタマイズ
さいごに

動きとしてはノートのように捲られるように表示されます。

ソース

<!--HTML-->
<div id="sec01" class="bg-img01"></div>
<div id="sec02" class="bg-img02"></div>
<div id="sec03" class="bg-img01"></div>
<div id="sec04" class="bg-img02"></div>
<div id="sec05" class="bg-img01"></div>
<div id="sec06" class="bg-img02"></div>

// CSS
.bg-img01,.bg-img02 {
	perspective: 1000px;
	transition: 1.3s;
	transform-origin: 0px 0px;
	transform: rotateX(-80deg);
	opacity: 0;
	height: 300px;	
}
.on{
	transform: rotateX(0deg)!important;
	opacity: 1;
}

.bg-img01{
	background: url(common/img/01.jpg) center top no-repeat;
	background-size: cover;
}
.bg-img02{	
	background: url(common/img/02.jpg) center top no-repeat;
	background-size: cover;
}

// jQuery
$(function() {	
	var scroll_height = 300;
	$(window).scroll(function () {
		if($(this).scrollTop() > $('#sec01').offset().top-scroll_height ) {
			$('#sec01').addClass('on');
		}
		if($(this).scrollTop() > $('#sec02').offset().top-scroll_height ) {
			$('#sec02').addClass('on');
		}
		if($(this).scrollTop() > $('#sec03').offset().top-scroll_height ) {
			$('#sec03').addClass('on');
		}
		if($(this).scrollTop() > $('#sec04').offset().top-scroll_height ) {
			$('#sec04').addClass('on');
		}
		if($(this).scrollTop() > $('#sec05').offset().top-scroll_height ) {
			$('#sec05').addClass('on');
		}
		if($(this).scrollTop() > $('#sec06').offset().top-scroll_height ) {
			$('#sec06').addClass('on');
		}
	});
});