読者です 読者をやめる 読者になる 読者になる

North-Geek

North-Geek(ノース・ギーク) 北海道札幌市在住のWebプログラマー・エンジニア

北海道札幌在住のWebプログラマーのブログです。

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

Webデザイン Web Web-css web-jquery

f:id:northgeek:20160522214010j:plain

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

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

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

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');
		}
	});
});

解説

あらかじめ#sec01〜04に「transform: rotateX(-80deg);」を指定しておき、transform: rotateX(0deg);」にすることにより、捲られるように表示します。

また、このとき「opacity: 0;」を指定し、要素の透明度を0にしておきます。そして「opacity: 1;」することによりフェードインアニメーションも付加することができます。

スクロールイベントはscrollでスクロール量をはかり、要素の先頭に到達したら.onクラスを要素にaddしていきます。この.sec-onクラスが付加されることによりアニメーション表示しています。

カスタマイズ

アニメーションの表示速度を変更したい場合など、カスタマイズには下記を調整します。


  • アニメーションの速度をカスタマイズしたい場合は、「transition: 1.3s;」、1.3sの値を変更します。(1.3sは1.3秒かけて表示)
  • アニメーションの発火タイミングを変更したい場合は、「var scroll_height = 300;」300の値を変更します。

さいごに

いかがでしたでしょうか。Web制作時に使えるアニメーションTipsを紹介しました。簡単に実装できるアニメーションなので、興味を持った方はぜひ試してみてください。今回は背景イメージだけですが、テキストなどを入れると更に良い感じに見えます。

Copyright© North-Geek All Rights Reserved.