スライドイン・スライドアウトするトーストを作る方法
スライドイン・スライドアウトするトーストを作る方法を紹介します。本記事では、HTML・CSS・JavaScriptを使用して、ボタンをクリックすると画面右側からトーストがスライドインし、一定時間が経過すると右側へスライドアウトして非表示になるUIを作成します。保存完了や送信完了など、操作結果を一時的に知らせたい場合に利用できます。
このサンプルでは、CSSのtransformとtransitionを使用してトーストの移動を表現します。JavaScriptではボタンのクリックをきっかけに表示用クラスを追加し、3秒後にクラスを削除することで、スライドインからスライドアウトまでの動きを実装します。ページ内のコンテンツを大きく動かさず、画面右下へ一時的にメッセージを表示できる構成です。
スライドイン・スライドアウトするトーストは、フォームの送信完了、設定の保存完了、商品をカートへ追加したときの案内、管理画面での操作結果などを知らせる場面に活用できます。HTMLではトーストに表示する文章を変更でき、CSSでは背景色、文字色、余白、角丸、表示位置、影、スライドアニメーションの時間などを調整できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
「トーストを表示」をクリックすると、画面右下からトーストがスライドインします。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="toast-slide-in-out_wrap">
<!-- タイトル -->
<div class="toast-slide-in-out_title">
スライドイン・スライドアウトするトースト
</div>
<!-- 説明文 -->
<p class="toast-slide-in-out_text">
ボタンをクリックすると、トーストが右側からスライドインして表示されます。
</p>
<!-- トースト表示ボタン -->
<button
type="button"
class="toast-slide-in-out_button"
data-slide-toast-open="">
トーストを表示
</button>
</div>
<!-- トースト -->
<div
class="toast-slide-in-out_toast"
data-slide-toast="">
保存しました
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでトーストの表示内容と表示ボタンを配置し、CSSで画面右下への配置やスライドイン・スライドアウトのアニメーションを設定します。JavaScriptではボタンのクリックをきっかけにトーストを表示し、3秒後に非表示へ戻します。外部サービスや外部ライブラリは使用しません。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはサンプル全体のHTMLを記述するファイルです。「トーストを表示」のボタン、トーストに表示する「保存しました」のメッセージなどを変更できます。また、同じフォルダにあるstyle.cssとscript.jsを読み込む構成になっています。
style.cssはサンプル全体とトーストのデザインを設定するファイルです。トーストを画面右下へ固定し、通常時はtransform:translateX(120%);で右側へ移動させています。表示用のis-showクラスが付くとtransform:translateX(0);へ変化し、右側からスライドインします。クラスが外れると再び右側へ移動してスライドアウトします。
script.jsはトーストの表示・非表示を制御するファイルです。「トーストを表示」ボタンをクリックするとis-showクラスを追加し、3秒後にクラスを削除します。ボタンを続けてクリックした場合は、それまでのタイマーをclearTimeout()で解除してから3秒の表示時間を数え直します。
設置方法・使い方
sampleフォルダ内へindex.html、style.css、script.jsの3ファイルを配置してください。index.htmlから同じ階層にあるstyle.cssとscript.jsを読み込むため、3ファイルを同じフォルダに保存します。配置後にsample/index.htmlをブラウザで開くとサンプルを実行できます。
「トーストを表示」ボタンをクリックすると、「保存しました」と書かれたトーストが画面右下へスライドインします。表示から3秒が経過すると、トーストが右方向へスライドアウトして非表示になります。
カスタマイズできる内容
index.htmlでは、サンプルのタイトルや説明文、ボタンに表示する「トーストを表示」の文字、トースト内の「保存しました」のメッセージを変更できます。実際に使用するページに合わせて、送信完了や設定保存などのメッセージへ書き換えられます。
style.cssでは、サンプル全体の横幅や余白、ボタンの背景色や角丸、トーストの表示位置、背景色、文字色、余白、角丸、影などを変更できます。transform:translateX(120%);が非表示時の位置、transform:translateX(0);が表示時の位置となっており、この位置の変化によってスライドイン・スライドアウトを表現しています。
script.jsでは、setTimeout()に指定している3000を変更することで、トーストが表示されてからスライドアウトするまでの時間を調整できます。
数値調整
style.css
max-width:700px;
サンプル全体の最大横幅です。値を大きくすると横に広がり、小さくすると狭くなります。
margin:40px auto;
サンプル全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
サンプル全体の内側余白です。値を大きくすると内容と枠線の間隔が広がり、小さくすると狭くなります。
border-radius:18px;
サンプル全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。
margin-bottom:12px;
タイトルと説明文の間隔です。値を大きくすると間隔が広がり、小さくすると狭くなります。
margin-bottom:24px;
説明文とボタンの間隔です。値を大きくすると間隔が広がり、小さくすると狭くなります。
padding:12px 24px;
ボタンの内側余白です。12pxが上下、24pxが左右の余白を表します。値を大きくするとボタンが大きくなります。
border-radius:8px;
ボタンの角丸です。値を大きくすると丸みが強くなります。
right:24px; / bottom:24px;
トーストの表示位置です。画面右端と下端からそれぞれ24px離して配置します。値を大きくすると画面端から離れ、小さくすると画面端へ近づきます。
padding:14px 18px;
トーストの内側余白です。14pxが上下、18pxが左右の余白を表します。値を大きくするとトースト内部の余白が広がります。
border-radius:10px;
トーストの角丸です。値を大きくすると丸みが強くなります。
box-shadow:0 12px 30px rgba(0,0,0,.18);
トーストの影です。12pxは縦方向の位置、30pxはぼかしの大きさ、0.18は影の透明度を表します。各値を変更すると影の位置、広がり、濃さを調整できます。
transform:translateX(120%);
非表示時にトーストを右側へ移動させる距離です。120%はトースト自身の横幅を基準にした移動量で、is-showクラスが付くとtranslateX(0)へ変化します。
opacity .35s ease / transform .35s ease
トーストの透明度と位置が変化する時間です。0.35秒でスライドイン・スライドアウトします。値を大きくするとゆっくり、小さくすると速く変化します。
script.js
3000
トーストを表示しておく時間です。3000は3秒を表します。値を大きくするとスライドアウトまでの時間が長くなり、小さくすると短くなります。
レスポンシブ対応
このサンプルはstyle.cssでレスポンシブ対応しています。サンプル全体にはwidth:100%;とmax-width:700px;を指定し、画面幅に合わせて横幅が縮小する構成です。
画面幅640px以下ではメディアクエリによって、サンプル全体の内側余白を24px 18pxへ変更します。トーストは画面右端・下端からそれぞれ16pxの位置へ配置し、max-width:calc(100% - 32px);によって画面幅から左右16pxずつを除いた範囲を最大横幅とします。スマートフォン・タブレット・PCの画面幅に合わせて表示できます。
コメント