訪問回数に応じてスタンプを押すアニメーション(jquery-cookie.jsを使用)

Webデザイン

ページにアクセスしたらその回数に応じてスタンプを押していくアニメーションです。
jquery-cookie.jsを使ってクッキーのデータを取得し、ページに訪問した回数に応じてスタンプの表示やアニメーションを行っています。

デモページはこちら

ソースコード

HTML

<div id="visit-stamp">
	<table>
		<thead>
			<tr>
				<th colspan="5">アクセスして訪問スタンプを集めよう</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><span>訪</span></td>
				<td><span>訪</span></td>
				<td><span>訪</span></td>
				<td><span>訪</span></td>
				<td><span>訪</span></td>
			</tr>
			<tr>
				<td><span>訪</span></td>
				<td><span>訪</span></td>
				<td><span>訪</span></td>
				<td><span>訪</span></td>
				<td><span>訪</span></td>
			</tr>
		</tbody>
	</table>
</div>
<p id="visitnum"></p>
<div id="reset">Cookieのリセット</div>

それとjquery-cookie.jsを使用するのでスクリプトの前に読み込んでおきます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js">

CSS

#visit-stamp {
	/* スタンプが横にはみ出ないように */
	overflow: hidden;
	/* スタンプが縦にはみ出るように */
	margin: -200px 0;
	padding: 200px 0;
}
#visit-stamp table {
	width: 100%;
	max-width: 600px;
	margin: 20px auto;
	border-collapse: collapse;
}
#visit-stamp th, #visit-stamp td {
	text-align: center;
	border: 1px solid #fc0;
	padding: 15px 10px;
}
#visit-stamp th {
	background: #ff9;
	color: #c00;
}
#visit-stamp td span {
	display: inline-block;
	color: #c00;
	font-size: 28px;
	font-weight: bold;
	line-height: 1.0;
	border: 1px solid #c00;
	border-radius: 50%;
	padding: 4px;
	/* スタンプアニメーションのための初期値 */
	visibility: hidden;
	opacity: 0.0;
	transform: scale(10.0) rotate(-30deg);
}
#visit-stamp td span.visited {
	visibility: visible;
	opacity: 1.0;
	transform: scale(1.0) rotate(0deg);
}
#visitnum {
	text-align: center;
}
#reset {
	box-sizing: border-box;
	width: 200px;
	margin: 50px auto 20px;
	text-align: center;
	padding: 10px;
	background: #ddd;
	cursor: pointer;
}

JavaScript

$(function(){
	
	//Cookieの読み込み
	var visitCount = $.cookie('visitCount');
	//訪問数のカウント
	if(visitCount == null){ //最初の訪問
		visitCount = 0;
	}else{
		visitCount++;
	}
	//Cookieに訪問数を保存
	$.cookie('visitCount', visitCount, {expires: 7});
	
	//スタンプの処理
	if($('#visit-stamp td:eq('+visitCount+') span').length){ //指定のtd要素があるか判定
		//過去に訪問したぶんのスタンプを表示
		if($('#visit-stamp td:lt('+visitCount+') span').length){
			$('#visit-stamp td:lt('+visitCount+') span').addClass('visited');
		}
		//今回訪問したぶんのスタンプをアニメーションで表示
		 setTimeout(function(){
			$('#visit-stamp td:eq('+visitCount+') span')
				.css('transition','all 0.5s ease-in')
				.addClass('visited');
		 },300);
	}else{
		//訪問回数がtd要素の数を超えたらすべて表示
		$('#visit-stamp td:lt('+visitCount+') span').addClass('visited');
	}
	
	//訪問数の表示
	$('#visitnum').text(visitCount+1 +'回目の訪問です。');
	
	//Cookieのリセットクリック時の処理
	$('#reset').click(function(){
		$.removeCookie('visitCount');
		alert("Cookieをリセットしました。")
	});
	
});

簡単な解説

まずはHTMLとCSSでスタンプが押された状態のものを作ります。
それができたらjQueryで訪問回数に応じたスタンプの表示やアニメーションを加えていきます。
そのためにCSS側でも必要な設定があるので、それと合わせて解説します。

Cookieを使った訪問回数の処理

まずはjquery-cookie.jsを使ってCookieを操作し、訪問回数の保存や取得をします。

//Cookieの読み込み
var visitCount = $.cookie('visitCount');
//訪問数のカウント
if(visitCount == null){ //最初の訪問
	visitCount = 0;
}else{
	visitCount++;
}
//Cookieに訪問数を保存
$.cookie('visitCount', visitCount, {expires: 7});

CookieにあるvisitCountを取得しvisitCountに代入。
最初の訪問時は値がないのでif文で分岐して0を代入しておきます。
訪問回数だったらふつうは1を代入するところですが、わけあって0です。
あらかじめ数値がある場合(=2回目以降)はvisitCountに1を足して訪問回数をカウントしていきます。
最後にvisitCountを保存しておきます(とりあえず保存期間は7日に設定)。
これでvisitCountを使えば訪問回数に応じた処理ができますね。

訪問回数に応じてスタンプの処理

続いてスタンプの表示やアニメーションの処理
まずはCSSでスタンプを非表示にしておきます。
それとフェードインの効果を加えたいのでopacity: 0.0;、上からスタンプが押されたように見せたいのでtransform: scale(10.0) rotate(-30deg);と設定しておきます。

#visit-stamp td span {
	display: inline-block;
	color: #c00;
	font-size: 28px;
	font-weight: bold;
	line-height: 1.0;
	border: 1px solid #c00;
	border-radius: 50%;
	padding: 4px;
	/* スタンプアニメーションのための初期値 */
	visibility: hidden;
	opacity: 0.0;
	transform: scale(10.0) rotate(-30deg);
}

それとスタンプの表示のためのクラスも用意しておきます。

#visit-stamp td span.visited {
	visibility: visible;
	opacity: 1.0;
	transform: scale(1.0) rotate(0deg);
}

あとはjQuery。

//スタンプの処理
if($('#visit-stamp td:eq('+visitCount+') span').length){ //指定のtd要素があるか判定
	//過去に訪問したぶんのスタンプを表示
	if($('#visit-stamp td:lt('+visitCount+') span').length){
		$('#visit-stamp td:lt('+visitCount+') span').addClass('visited');
	}
	//今回訪問したぶんのスタンプをアニメーションで表示
	 setTimeout(function(){
		$('#visit-stamp td:eq('+visitCount+') span')
			.css('transition','all 0.5s ease-in')
			.addClass('visited');
	 },300);
}else{
	//訪問回数がtd要素の数を超えたらすべて表示
	$('#visit-stamp td:lt('+visitCount+') span').addClass('visited');
}

eqセレクターで今回スタンプが押されるtd要素を、ltセレクターを使ってすでに押されているtd要素を指定しています。
このときJavaScriptは0から数えていくので1番目の要素を指定したい場合はeq(0)となります。
なので訪問回数のカウントも0スタートにしました。
まずはすでに押されているスタンプの表示。
visitedクラスを追加することで表示させています。

//過去に訪問したぶんのスタンプを表示
if($('#visit-stamp td:lt('+visitCount+') span').length){
	$('#visit-stamp td:lt('+visitCount+') span').addClass('visited');
}

次に今回スタンプが押されるtd要素の処理。

//今回訪問したぶんのスタンプをアニメーションで表示
setTimeout(function(){
	$('#visit-stamp td:eq('+visitCount+') span')
		.css('transition','all 0.5s ease-in')
		.addClass('visited');
},300);

setTimeoutを使っているのは、アニメーションがはじまるのが少し早いと感じたからです。
ここでもvisitedクラスを追加することで表示させているのですが、過去に訪問したぶんのスタンプの表示と違うのは.css()でtransitionを設定していることです。
これでスタンプが押されるかのような滑らかに変化を実現しています。

おわりに

簡易的ではありますが、アクセスするたびに変化があると飽きなくていいかもしれません。
今回はアクセスするたびに訪問回数をカウントしていますが、スマホゲームのログインボーナスみたいにその日はじめてアクセスしたら何か処理をしたり、スタンプがすべて埋まったら何か表示させるなど、いろいろできそうですね。

コメント