JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

JavaScriptの.setTimeout()でページの下部に3秒間ボックス通知を表示

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

.setTimeout()

JavaScriptの.setTimeout()でページの下部に3秒間ボックス通知を表示

JavaScriptの.setTimeout()でページの下部に3秒間ボックス通知を表示

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を記述します。「ボックス通知」のHTMLは、ページの下部に表示されるものなので、記述する場所はコードの下部の方に記述しましょう。

<button id="messebutton">下部中央にメッセージを出す</button>
<!-- ボックス通知 -->
<div id="snackbar">通知メッセージ</div>
JavaScriptを記述

次に、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を記述

最後に、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です。

参考にしてみてください。