jQueryとCSSを使ってスクロール時に要素をアニメーションで表示する方法

今回はjQueryとCSSでできる、スクロールした時に要素をアニメーションさせて表示する方法をいくつか紹介します。

具体的にはスクロールして要素が表示される時にフェードインや上下に動いたり回転したりといった感じです。

 

準備

CSS

共通の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;
}

 

jquery.inview.js

スクロール時にアニメーションさせて表示するのに必要なjQueryプラグインです。

jquery.inview.jsではブラウザ上で要素が見えた時や画面から外れた時の処理を簡単に行うことができます。

ソースはgithubに上がっているので、ダウンロードしましょう。

github – jquery.inview.js

 

jQuery本体も一緒に読み込んでしまいましょう。

以下のコードをコピペします。パスは任意に書き換えて構いません。

<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>

 

jquery.inview.jsの使い方

ズームインで表示

要素が表示される場所までスクロールされると、要素をズームインで表示します。

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

 

上に移動して表示

要素が表示される場所までスクロールされると、要素を上に移動して表示します。

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回転させながらズームインで表示します。

上で紹介したコードを組み合わせています。

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

 

移動+フェードインで表示

要素が表示される場所までスクロールされると、要素を移動しながらフェードインで表示します。

これも上で紹介したコードの組み合わせですが、中でも特に使用頻度が高いと思います。

自分なりにわかりやすいコードにするともっといいんじゃないでしょうか。

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