整列しているボックスをアニメーションで順番に表示

Webデザイン

CSSとjQuery（JavaScript）を利用したページ読み込み時に再生されるアニメーションです。
CSSでtransitionとtransformを設定しておき、jQueryでtransformの値を変更することでアニメーションを実現しています。
言葉はで説明しづらいので、どういう動作なのかはデモページをごらんください。

デモページはこちら

ソースコード

HTML

<ul class="list">
	<li class="movie">
		<p>映画</p>
		<div></div>
	</li>
	<li class="book">
		<p>書籍</p>
		<div></div>
	</li>
	<li class="music">
		<p>音楽</p>
		<div></div>
	</li>
	
	<!-- 中略 -->

	<li class="music">
		<p>音楽</p>
		<div></div>
	</li>
	<li></li>
	<li></li>
</ul>

CSS

.list {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	list-style: none;
	width: 1000px;
	margin: 20px auto;
}
.list li {
	flex: 0 0 24%;
	border: 1px solid #ccc;
	margin-bottom: 10px;
	transform: scale(0.0);
	transition: transform 0.2s cubic-bezier(.49,.01,.45,1.9);
}
.list li:empty {
	border: none;
}
.list p {
	padding: 5px;
	font-size: 12px;
	text-align: center;
	color: #fff;
}
.movie p {
	background: #f60;
}
.music p {
	background: #093;
}
.book p {
	background: #36c;
}
.list div {
	height: 150px;
	background: #fcfcfc;
}

JavaScript

$(function(){
	
	var i = 1;
	var animate = function(){
		//li要素の数を超えたら終了
		if(i > $('.list li').length){
			return;
		}
		//指定のli要素の値を変更してアニメーション
		$('.list li:nth-child('+i+')').css('transform','scale(1.0)');
		i++; //次のli要素を指定するために足す
		//0.1秒後にループ
		setTimeout(animate,100);
	}
	animate(); //処理の開始

});

簡単な解説

サンプルではボックスをflexboxで並べていますが、このあたりはお好みで。
重要なポイントはCSSのtransitionとjQueryの記述なので主にその解説です。

CSSでアニメーションの下準備をする

このアニメーションの肝となる部分のひとつがこちら。

.list li {
	flex: 0 0 24%;
	border: 1px solid #ccc;
	margin-bottom: 10px;
	transform: scale(0.0);
	transition: transform 0.2s cubic-bezier(.49,.01,.45,1.9);
}

並んでいるボックスはtransform: scale(0.0);にして見えなくしています。
あとはtransitionを設定してtransformの値が変わったときになめらかに動くようにします。
cubic-bezierは、ボックスが余計に拡大されてから表示したい大きさに戻るという効果をつけるため、この値を設定しています。
これでCSS側の準備が整いました。
あとはjQueryでtransformの値を変えてやれば、transitionの設定によってアニメーションになります。

jQueryでボックスのtransformを順番に変える

一度にアニメーションさせるのであれば単純に、

$('.list li).css('transform','scale(1.0)');

と書けばいいのですが、今回は順番にアニメーションをさせたいのでひと手間加えています。

var i = 1;
var animate = function(){
	//li要素の数を超えたら終了
	if(i > $('.list li').length){
		return;
	}
	//指定のli要素の値を変更してアニメーション
	$('.list li:nth-child('+i+')').css('transform','scale(1.0)');
	i++; //次のli要素を指定するために足す
	//0.1秒後にループ
	setTimeout(animate,100);
}
animate(); //処理の開始

ファンクションを作り、その処理をボックス分繰り返すことで順番にアニメーションをさせていきます。

//指定のli要素の値を変更してアニメーション
$('.list li:nth-child('+i+')').css('transform','scale(1.0)');

この部分でボックスをひとつだけを指定し、transformの値を変更。
ボックス（li要素）の何番目という数字は変数iを使っていますが、最初iには1が代入されているので１番目のボックスが指定されて値が変更されます。
これで１番目のボックスがアニメーションで表示されます。
その後iに１を足してから、setTimeoutを使って0.1秒後に再びファンクションを呼び出します。
するとまた、

$('.list li:nth-child('+i+')').css('transform','scale(1.0)');

の処理が行われるわけですが、このiの値は1足されて2になっているので２番目のボックスが指定されて値が変更、アニメーションが実行されます。
これをボックスの数だけ繰り返すことで、順番にアニメーションが再生されていきます。
あとはループを抜けるために、iの数値がli要素の数を超えたら終了するように記述しておきます。

//li要素の数を超えたら終了
if(i > $('.list li').length){
	return;
}

これで0.1秒ごとにボックスが順番に拡大表示されるアニメーションができました。

おわりに

やはりアニメーションがあると華やかですね。
過剰なアニメーションは逆効果だとは思いますが、使い方しだいでは目を引くサイトになりそうです。
工夫しだいでいろいろできると思うので試してみてください。

コメント

ホーム
トップ