CSS + JavaScriptで、更新箇所とかがピカッと光ってハイライトされるやつを作る

#CSS #JavaScript

タイトル意味不明ですみません。Ajaxで画面表示を更新する時なんかに、更新された部分が判別できるように、背景色とかが一瞬だけ変わってだんだん元に戻っていくやつのことです。

私は、本家サイトのブラウザゲーのリーダーボードで使ってます。いま送信したスコアが表に載った時、その部分が光るようにしてました。

そのときに目を離してたら、どこが変化したか判らないのは変わりないので、これだけだとユーザビリティ的に微妙かもしれません。でも見た目が楽しいので好きです。

サンプルコード

↑の「ピカッ！」を押すと光ります

HTML

<button id="pika-button">ピカッ！</button>
<div id="pika-box">↑の「ピカッ！」を押すと光ります</div>

CSS

#pika-box {
	padding: 20px;
	background-color: #444;  /* 元の背景色 */
	transition: background-color 1s;  /* 1秒かけて背景色を元に戻す */
}
#pika-box.highlight {
	background-color: #e66;  /* ピカッてした時の背景色 */
	transition-duration: 0s; /* 即座に背景色を変える */
}

JavaScript

document.querySelector('#pika-button').addEventListener('click', function() {
	// ボタンを押されたら、ピカッとさせたい要素にクラス "highlight" を付与
	var box = document.querySelector('#pika-box');
	box.classList.add('highlight');

	// 50ミリ秒後にすぐ外す
	setTimeout(function() {
		box.classList.remove('highlight');
	}, 50);
});

しつこい解説

JavaScriptでやってることは、「ボタンが押されたらピカッとさせたい要素に highlight クラスを付与して、50ミリ秒後に highlight クラスを外す」だけです。

こうすると一瞬だけ highlight クラスが付きますが、そこにCSSの transition を設定しておくことで、背景色をゆっくり元に戻すことができます。

具体的には以下のように設定してます。

.highlight なしの #pika-box には、1秒かけて背景色が遷移するように transition を設定
.highlight ありの #pika-box には、即座に (ゼロ秒で) 背景色が遷移するように transition を設定

これで「highlight なし→ありの遷移時には即座に」「highlight あり→なしの遷移時には1秒かけて」背景色が変化するようになります。

なお、1ミリ秒じゃなくてわざわざ50ミリ秒を設定した理由は、あんまり短いとうまく色が出ないっぽいからです。現時点で最新のChromeでは、1ミリ秒とかだとうまくいきませんでした。他のブラウザでは違うかもしれません。