UIにモーダルがありますが、モーダルはユーザーが「開く・閉じる」の操作が必要なのに比べ、下部に出るボックス通知は、「閉じる」必要がない為ユーザーにそのストレスを課しません。
この記事では、JavaScriptの .setTimeout() を使ってページの下部に3秒間ボックス通知を表示させます。
是非、参考にしてみてください。
.setTimeout()
JavaScriptの setTimeout() は、タイマーを設定するメソッドです。
setTimeout(function(){
element.style.display = "none";
}, 1500);この記事では「3000（3秒）」で指定したミリ秒の単位で指定をして、時間切れになると関数を実行させています。
jQueryだと「fadeOut()」メソッドみたいなのをこの setTimeout() で使用しています。
ページの下部に3秒間ボックス通知を表示するサンプル
早速サンプルです。以下「下部中央にメッセージを出す」のボタンをクリックすると、モバイル・デスクトップの下部中央に、ポップアップで3秒間メッセージを表示します。
これは、いわゆるGoogleが提唱したマテリアルデザインの「スナックバー」とも言われるUIで、GoogleのWebアプリでもよく見かけるUIです。
スナックバーの詳細が気になった方は、以下マテリアルデザインのガイドラインからご覧ください。
実装の手順と方法
コードの解説の前に、実装の手順と方法について解説します。
はじめに、以下のHTMLを記述します。「ボックス通知」のHTMLは、ページの下部に表示されるものなので、記述する場所はコードの下部の方に記述しましょう。
<button id="messebutton">下部中央にメッセージを出す</button>
<!-- ボックス通知 -->
<div id="snackbar">通知メッセージ</div>次に、JavaScriptのコードをページに記述します。
コードは <body>〜</body> で、</body> の閉じタグ（クロージングタグ）の前に記述しましょう。
var bar = document.getElementById("snackbar");
document.getElementById('messebutton').addEventListener('click', () => {
bar.className = "show";
setTimeout(function(){ bar.className = bar.className.replace("show", ""); }, 3000);
});最後に、CSSを記述します。
#snackbar {
visibility: hidden;
min-width: 250px;
background-color: #313131;
color: #fff;
text-align: center;
border-radius: 2px;
padding: 15px 30px;
position: fixed;
z-index: 1;
left: 50%;
bottom: 30px;
transform: translateX(-50%);
box-shadow: 0 3px 9px rgb(0 0 0 / 25%);
}
#snackbar.show {
visibility: visible;
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
@-webkit-keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
@keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
@-webkit-keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
@keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}これで完成です。
ざっくりとしたコードの解説
コードは、HTML・JavaScript・CSSの3種類です。順に解説していきます。
HTML
HTMLは、通知メッセージを出すボタンと、ページ下部に出す通知メッセージの2種類です。
<button id="messebutton">下部中央にメッセージを出す</button>
<!-- ボックス通知 -->
<div id="snackbar">通知メッセージ</div>「通知メッセージ」のHTMLは、ボタンをクリックするとページの下部に表示されるものなので、記述する場所はコードの下部の方に記述しましょう。
JavaScript
JavaScriptは、ボタンをクリックした時に、.addEventListener のクリックイベントで発動します。発動後は、class名の付け替えで setTimeout() のタイマーでメッセージ通知のclass名を削除します。
var bar = document.getElementById("snackbar");
document.getElementById('messebutton').addEventListener('click', () => {
bar.className = "show";
setTimeout(function(){ bar.className = bar.className.replace("show", ""); }, 3000);
});CSS
CSSは、大きく分けてメッセージ通知部分にあたる「snackbar」のid名を持つ要素と、メッセージ通知が出た場合のアニメーション「fadein」「fedaout」の2種類です。
#snackbar {
visibility: hidden;
min-width: 250px;
background-color: #313131;
color: #fff;
text-align: center;
border-radius: 2px;
padding: 15px 30px;
position: fixed;
z-index: 1;
left: 50%;
bottom: 30px;
transform: translateX(-50%);
box-shadow: 0 3px 9px rgb(0 0 0 / 25%);
}
#snackbar.show {
visibility: visible;
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
@-webkit-keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
@keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
@-webkit-keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
@keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}さいごに
Webサイト向けというよりは、ユーザーの操作で動的に変化するWebアプリ系に向いたUIですが、少しでもユーザーの操作がある場合、設置してみるのもいいUIです。
参考にしてみてください。
