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

North-Geek

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

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

jQuery&CSS3で超簡単!スクロールするとかっこ良く要素を表示する方法7つ

Webデザイン Web web-jquery

f:id:northgeek:20160403170739j:plain

フロントエンドの仕事でWebサイトの構築をしていると、頻繁にスクロールして要素の高さまで到達したら表示するという処理をすることがあります。

表示の仕方はフェードインだったり上下動いて表示させたりと様々ですが、今回はよく使う7パターンを紹介します。

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

Demo

前提

共通CSS

// CSS
.list{
	margin: 50px 50px 50px 50px;
	list-style-type: none;
	overflow: hidden;
}
.list li{
	margin: 50px 20px 50px 20px;
	float: left;
	transition: .8s;
}

表示される画像の要素は共通のCSSを使用しています。
表示する動きの部分のみを別クラスで定義する形になります。

※別クラス=opacityなどの透明度でフェードインさせたり、回転させるといった機能を別クラスにしています。

スクロールイベント用jQueryプラグイン

スクロールイベントは「jquery.inview.js」というプラグインを使用します。
ブラウザの画面上で要素が見えたとき画面から外れたときに処理を実行するという動作が簡単に実現できます。

まずはGithubに用意されている公式の配布サイトからプラグインのファイルをダウンロードしてきましょう。

inview(DL)

jQueryを読み込むために下記2行を追加します。

<!--HTML-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="./jquery.inview.js"></script>

inviewの使い方で参考にしたブログ

ズームイン表示

要素が表示されるエリアまでスクロールしたら、ズームインしながら要素を表示します。

<!--HTML-->
<h2 class="mod-tit-demo02">1.縮小・拡大表示</h2>
<ul class="list">
	<li class="list-mv01"><img src="common/img/01.jpg"></li>
	<li class="list-mv01"><img src="common/img/02.jpg"></li>
	<li class="list-mv01"><img src="common/img/03.jpg"></li>
</ul>
<ul class="list">
	<li class="list-mv01"><img src="common/img/01.jpg"></li>
	<li class="list-mv01"><img src="common/img/02.jpg"></li>
	<li class="list-mv01"><img src="common/img/03.jpg"></li>
</ul>
<ul class="list">
	<li class="list-mv01"><img src="common/img/01.jpg"></li>
	<li class="list-mv01"><img src="common/img/02.jpg"></li>
	<li class="list-mv01"><img src="common/img/03.jpg"></li>
</ul>
// CSS
.list{
	margin: 50px 50px 50px 50px;
	list-style-type: none;
	overflow: hidden;
}
.list li{
	margin: 50px 20px 50px 20px;
	float: left;
	transition: .8s;
}

.list-mv01{
	transform: scale(0, 0);
	-webkit-transform: scale(0, 0);
}
.mv01{
	transform: scale(1, 1);
	-webkit-transform: scale(1, 1);
}
// JS
$(function() {
	$('.list-mv01').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
		if(isInView){
			$(this).stop().addClass('mv01');
		}
		else{
			$(this).stop().removeClass('mv01');
		}
	});
});


フェードイン表示

要素が表示されるエリアまでスクロールしたら、フェードインしながら要素を表示します。

<!--HTML-->
<ul class="list">
	<li class="list-mv02"><img src="common/img/01.jpg"></li>
	<li class="list-mv02"><img src="common/img/02.jpg"></li>
	<li class="list-mv02"><img src="common/img/03.jpg"></li>
</ul>
<ul class="list">
	<li class="list-mv02"><img src="common/img/01.jpg"></li>
	<li class="list-mv02"><img src="common/img/02.jpg"></li>
	<li class="list-mv02"><img src="common/img/03.jpg"></li>
</ul>
<ul class="list">
	<li class="list-mv02"><img src="common/img/01.jpg"></li>
	<li class="list-mv02"><img src="common/img/02.jpg"></li>
	<li class="list-mv02"><img src="common/img/03.jpg"></li>
</ul>
// CSS
.list-mv02{
	opacity: 0;
}
.mv02{
	opacity: 1.0;
}
// JS
$(function() {
	$('.list-mv02').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
		if(isInView){
			$(this).stop().addClass('mv02');
		}
		else{
			$(this).stop().removeClass('mv02');
		}
	});
});

回転

要素が表示されるエリアまでスクロールしたら、回転しながら要素を表示します。

<!--HTML-->
<ul class="list">
	<li class="list-mv03"><img src="common/img/01.jpg"></li>
	<li class="list-mv03"><img src="common/img/02.jpg"></li>
	<li class="list-mv03"><img src="common/img/03.jpg"></li>
</ul>
<ul class="list">
	<li class="list-mv03"><img src="common/img/01.jpg"></li>
	<li class="list-mv03"><img src="common/img/02.jpg"></li>
	<li class="list-mv03"><img src="common/img/03.jpg"></li>
</ul>
<ul class="list">
	<li class="list-mv03"><img src="common/img/01.jpg"></li>
	<li class="list-mv03"><img src="common/img/02.jpg"></li>
	<li class="list-mv03"><img src="common/img/03.jpg"></li>
</ul>
// CSS
.list-mv03{
	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
}
.mv03{
	transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
}
// JS
$(function() {
	$('.list-mv03').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
		if(isInView){
			$(this).stop().addClass('mv03');
		}
		else{
			$(this).stop().removeClass('mv03');
		}
	});
});

3D回転

要素が表示されるエリアまでスクロールしたら、3D回転しながら要素を表示します。
おしゃれなサイトはよくこのあたりの動きを仕様したりしています。

<!--HTML-->
<ul class="list">
	<li class="list-mv04"><img src="common/img/01.jpg"></li>
	<li class="list-mv04"><img src="common/img/02.jpg"></li>
	<li class="list-mv04"><img src="common/img/03.jpg"></li>
</ul>
<ul class="list">
	<li class="list-mv04"><img src="common/img/01.jpg"></li>
	<li class="list-mv04"><img src="common/img/02.jpg"></li>
	<li class="list-mv04"><img src="common/img/03.jpg"></li>
</ul>
<ul class="list">
	<li class="list-mv04"><img src="common/img/01.jpg"></li>
	<li class="list-mv04"><img src="common/img/02.jpg"></li>
	<li class="list-mv04"><img src="common/img/03.jpg"></li>
</ul>
// CSS
.list-mv04{
	transform:rotateY(0deg);
	-webkit-transform:rotateY(0deg);
}
.mv04{
	transform:rotateY(360deg);
	-webkit-transform:rotateY(360deg);
}
// JS
$(function() {
	$('.list-mv04').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
		if(isInView){
			$(this).stop().addClass('mv04');
		}
		else{
			$(this).stop().removeClass('mv04');
		}
	});
});

上移動

要素が表示されるエリアまでスクロールしたら、上移動しながら要素を表示します。
動きをあまり入れたくない企業のWebサイトやブログなどにオススメです。

<!--HTML-->
<ul class="list">
	<li class="list-mv05"><img src="common/img/01.jpg"></li>
	<li class="list-mv05"><img src="common/img/02.jpg"></li>
	<li class="list-mv05"><img src="common/img/03.jpg"></li>
</ul>
<ul class="list">
	<li class="list-mv05"><img src="common/img/01.jpg"></li>
	<li class="list-mv05"><img src="common/img/02.jpg"></li>
	<li class="list-mv05"><img src="common/img/03.jpg"></li>
</ul>
<ul class="list">
	<li class="list-mv05"><img src="common/img/01.jpg"></li>
	<li class="list-mv05"><img src="common/img/02.jpg"></li>
	<li class="list-mv05"><img src="common/img/03.jpg"></li>
</ul>
// CSS
.list-mv05{
	transform: translate(0,40px); 
	-webkit-transform: translate(0,40px); 
}
.mv05{
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}
// JS
$(function() {
	$('.list-mv05').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
		if(isInView){
			$(this).stop().addClass('mv05');
		}
		else{
			$(this).stop().removeClass('mv05');
		}
	});
});

3D回転+ズームイン表示

要素が表示されるエリアまでスクロールしたら、3D回転+ズームイン表示しながら要素を表示します。
上で紹介した2つのCSSを組み合わせて使用しています。

<!--HTML-->
<ul class="list">
	<li class="list-mv06"><img src="common/img/01.jpg"></li>
	<li class="list-mv06"><img src="common/img/02.jpg"></li>
	<li class="list-mv06"><img src="common/img/03.jpg"></li>
</ul>
<ul class="list">
	<li class="list-mv06"><img src="common/img/01.jpg"></li>
	<li class="list-mv06"><img src="common/img/02.jpg"></li>
	<li class="list-mv06"><img src="common/img/03.jpg"></li>
</ul>
<ul class="list">
	<li class="list-mv06"><img src="common/img/01.jpg"></li>
	<li class="list-mv06"><img src="common/img/02.jpg"></li>
	<li class="list-mv06"><img src="common/img/03.jpg"></li>
</ul>
// CSS
.list-mv06{
	transform: scale(0, 0) rotateY(180deg);
	-webkit-transform: scale(0, 0) rotateY(180deg);
}
.mv06{
	transform: scale(1, 1) rotateY(360deg);
	-webkit-transform: scale(1, 1) rotateY(360deg);
}
// JS
$(function() {
	$('.list-mv06').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
		if(isInView){
			$(this).stop().addClass('mv06');
		}
		else{
			$(this).stop().removeClass('mv06');
		}
	});
});

移動+フェードイン表示

要素が表示されるエリアまでスクロールしたら、移動+フェードイン表示しながら要素を表示します。
上で紹介した2つのCSSを組み合わせて使用しています。この動きは使い勝手がよく、使用する頻度が高いので覚えておいた方良いです。コピペ使えるくらいでもOK。

<!--HTML-->
<ul class="list">
	<li class="list-mv07"><img src="common/img/01.jpg"></li>
	<li class="list-mv07"><img src="common/img/02.jpg"></li>
	<li class="list-mv07"><img src="common/img/03.jpg"></li>
</ul>
<ul class="list">
	<li class="list-mv07"><img src="common/img/01.jpg"></li>
	<li class="list-mv07"><img src="common/img/02.jpg"></li>
	<li class="list-mv07"><img src="common/img/03.jpg"></li>
</ul>
<ul class="list">
	<li class="list-mv07"><img src="common/img/01.jpg"></li>
	<li class="list-mv07"><img src="common/img/02.jpg"></li>
	<li class="list-mv07"><img src="common/img/03.jpg"></li>
</ul>
// CSS
.list-mv07{
	opacity: 0;
	transform: translate(0,60px); 
	-webkit-transform: translate(0,60px); 
}
.mv07{
	opacity: 1.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}
// JS
$(function() {
	$('.list-mv07').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
		if(isInView){
			$(this).stop().addClass('mv07');
		}
		else{
			$(this).stop().removeClass('mv07');
		}
	});
});

さいごに

いかでしたでしょうか。jQueryプラグイン「inview」を使うと簡単に実装することができます。Webサイト制作でよく使うテクニックなので覚えておくと色々なところで使えるのとても便利です。

Copyright© North-Geek All Rights Reserved.