フェードイン・フェードアウトで表示するトーストの作り方
フェードイン・フェードアウトで表示するトーストの作り方を紹介します。このサンプルでは、HTML・CSS・JavaScriptを使用し、ボタンをクリックすると画面右下へ通知メッセージを表示します。トーストは透明な状態から下から浮かび上がるようにフェードインし、3秒後には同じアニメーションでフェードアウトして自動的に非表示になります。
保存完了、送信完了、設定変更、商品追加など、操作結果を短時間だけ知らせたい場面に利用できます。画面全体を覆わず、現在の操作を中断させずに通知できるため、管理画面、会員サイト、ECサイト、お問い合わせフォームなどへ導入しやすい表示方法です。通知は一定時間後に自動で消えるため、利用者が閉じる操作を行う必要もありません。
HTMLではボタンの文字やトーストへ表示するメッセージを変更できます。CSSでは表示位置、背景色、文字色、余白、角丸、影、移動量、フェード時間などを調整できます。JavaScriptではトーストを表示してから非表示にするまでの時間を変更できるため、用途に合わせて表示時間を設定できます。レスポンシブにも対応しており、スマートフォン・タブレット・PCで利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
ボタンをクリックすると、画面右下へトーストがゆっくりフェード表示されます。
「トーストを表示」をクリックすると通知がフェードインし、3秒後にフェードアウトして自動的に非表示になります。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン表示に対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>フェードで表示するトースト</title>
<!-- CSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- トースト全体 -->
<div class="fade-toast_wrap">
<!-- タイトル -->
<div class="fade-toast_title">
フェードで表示するトースト
</div>
<!-- 説明文 -->
<p class="fade-toast_text">
ボタンをクリックすると、画面右下へトーストがゆっくりフェード表示されます。
</p>
<!-- 表示ボタン -->
<button class="fade-toast_button" type="button" id="fade-toast-open">
トーストを表示
</button>
</div>
<!-- トースト本体 -->
<div class="fade-toast_message" id="fade-toast">
保存しました
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではトーストを表示するボタンとメッセージを配置し、CSSでは画面右下へ表示するデザインとフェードイン・フェードアウトのアニメーションを設定しています。JavaScriptではボタンをクリックしたときの表示処理と、一定時間後に自動で閉じる処理を行います。画像や外部ライブラリは不要なため、そのままダウンロードしてすぐに利用できます。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはトーストを表示するボタンと、画面へ表示するメッセージを配置するファイルです。ボタンの文字やトーストのメッセージ内容を自由に変更できます。
style.cssはトーストの位置や色、角丸、影、余白、フェードイン・フェードアウトのアニメーションを設定するファイルです。表示位置やデザインも用途に合わせて変更できます。
script.jsはボタンをクリックしたときにトーストを表示し、一定時間後に自動で閉じる処理を行うファイルです。表示時間や動作を変更したい場合は、このファイルを編集します。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置してください。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開くと利用できます。表示された「トーストを表示」ボタンをクリックすると、画面右下へトーストがフェードインし、一定時間後にフェードアウトして自動で閉じます。
カスタマイズできる内容
index.htmlではボタンの文字やトーストのメッセージを変更できます。用途に合わせて「保存しました」「送信しました」「削除しました」など自由な内容へ変更できます。
style.cssではトーストの背景色、文字色、角丸、影、余白、表示位置、横幅、フェード時間を変更できます。画面右下以外へ表示したい場合は、配置位置も自由に調整できます。
script.jsではトーストを表示する時間を変更できます。用途に合わせて短時間で閉じる通知や、長めに表示する通知へ変更できます。
数値調整
style.css
right:24px;
トーストを右端から配置する位置です。値を大きくすると左へ移動し、小さくすると右端へ近付きます。
bottom:24px;
トーストを下端から配置する位置です。値を大きくすると上へ移動し、小さくすると下へ近付きます。
padding:14px 18px;
トーストの内側余白です。値を大きくするとトースト全体が大きくなります。
border-radius:10px;
トーストの角丸です。値を大きくすると丸みが強くなり、小さくすると四角に近付きます。
transform:translateY(12px);
表示前の移動量です。値を大きくすると下から現れる距離が大きくなります。
transition:1s;
フェードイン・フェードアウトの時間です。1秒かけてアニメーションします。値を大きくするとゆっくり、小さくすると速く切り替わります。
script.js
setTimeout(...,3000);
トーストを表示する時間です。3000は3秒を表します。値を大きくすると長く表示され、小さくすると早く閉じます。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのmax-widthとwidth:100%により、画面幅に応じてレイアウトが調整されます。また、640px以下ではpadding:24px 18px;へ変更して余白を調整しているため、スマートフォン・タブレット・PCで利用できます。
コメント