バウンドしながら開閉するモーダルウインドウの作り方
バウンドしながら開閉するモーダルウインドウの作り方を紹介します。このサンプルでは、「モーダルを開く」をクリックすると、小さな状態から大きく拡大し、一度縮んでもう一度少し拡大してから通常サイズへ落ち着く動きでモーダルウインドウを表示します。「閉じる」をクリックしたときも、一度拡大・縮小する反動を付けてから小さくなりながら非表示になります。
基本のモーダルウインドウと同じ構造やデザインを使用し、開閉時のアニメーションだけを追加しています。背景を暗くするオーバーレイや背景ぼかし、外側クリック、×ボタンなどは追加していません。通常のズームイン・ズームアウトよりも拡大と縮小を複数回行うため、弾むような動きをはっきり確認できるのが特徴です。お知らせ、確認画面、キャンペーン案内など、表示したことを視覚的に強調したい場面で利用できます。
HTMLではモーダルのタイトルや本文を変更でき、CSSではモーダルの横幅、余白、角丸、影に加えて、バウンド時の拡大率や縮小率、アニメーション時間を調整できます。JavaScriptでは開くボタンと閉じるボタンのクリックを検知し、表示状態と閉じるアニメーションを管理するクラスを切り替えます。640px以下では表示エリアとモーダルの内側余白を小さくするレスポンシブ対応も行っています。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
モーダルを開くと大きく弾みながら表示され、閉じると反動を付けながら小さくなります。
バウンドアニメーションによる開閉動作を確認できます。
「モーダルを開く」をクリックするとバウンドしながら表示され、「閉じる」をクリックすると反動を付けながら閉じます。
コードをコピーして使おう！
<!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="modal-open-close-bounce_wrap">
<!-- タイトル -->
<div class="modal-open-close-bounce_title">
バウンド開閉モーダル
</div>
<!-- 説明文 -->
<p class="modal-open-close-bounce_text">
モーダルを開くと大きく弾みながら表示され、閉じると反動を付けながら小さくなります。
</p>
<!-- モーダルを開くボタン -->
<button
class="modal-open-close-bounce_open"
type="button"
data-modal-open-close-bounce-open="">
モーダルを開く
</button>
</div>
<!-- モーダルウインドウ -->
<div
class="modal-open-close-bounce_modal"
role="dialog"
aria-modal="true"
aria-labelledby="modal-open-close-bounce-title"
data-modal-open-close-bounce-modal="">
<!-- モーダルタイトル -->
<div
class="modal-open-close-bounce_modal-title"
id="modal-open-close-bounce-title">
モーダルタイトル
</div>
<!-- モーダル本文 -->
<p class="modal-open-close-bounce_modal-text">
バウンドアニメーションによる開閉動作を確認できます。
</p>
<!-- モーダルを閉じるボタン -->
<button
class="modal-open-close-bounce_close"
type="button"
data-modal-open-close-bounce-close="">
閉じる
</button>
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。基本のモーダルウインドウと同じ構造やデザインを使用し、開くときと閉じるときに複数回の拡大・縮小を行うバウンドアニメーションを追加しています。背景を暗くするオーバーレイやぼかしは使用せず、画面中央に表示するモーダル本体だけをアニメーションさせます。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはモーダルウインドウ全体を構成するファイルです。「モーダルを開く」ボタン、モーダルのタイトル・本文、「閉じる」ボタンを配置しています。index.htmlからstyle.cssとscript.jsを読み込んで使用します。
style.cssは表示エリア、ボタン、モーダルウインドウのデザインとバウンドアニメーションを設定するファイルです。@keyframes modal-open-close-bounce_openでは、小さい状態から130%まで拡大し、82%まで縮小、112%まで再拡大、96%まで縮小してから100%へ戻すことで、はっきりとしたバウンドを表現しています。閉じるときは@keyframes modal-open-close-bounce_closeを使用し、一度118%まで拡大してから88%へ縮小、108%へ戻したあと、40%まで小さくしながら非表示にします。
script.jsはモーダルの開閉状態を管理するファイルです。「モーダルを開く」をクリックするとis-activeクラスを追加します。「閉じる」をクリックするとis-activeを削除してis-closingを追加し、閉じるアニメーションが完了する0.6秒後にis-closingを削除します。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。「モーダルを開く」をクリックすると画面中央へモーダルが大きくバウンドしながら表示され、「閉じる」をクリックすると反動を付けてバウンドしながら小さくなり、非表示になります。
カスタマイズできる内容
index.htmlでは表示エリアのタイトル・説明文、モーダルのタイトル・本文、開くボタンと閉じるボタンの文字を変更できます。style.cssでは表示エリアやモーダルの横幅、余白、角丸、影、ボタンのデザインを変更できます。さらに、@keyframes内のscale()や各パーセントを変更することで、バウンドの大きさやタイミングを調整できます。
数値調整
style.css
max-width:700px;
表示エリアの最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
表示エリアの上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
表示エリアの内側余白です。値を大きくすると内容と枠線の間隔が広がり、小さくすると狭くなります。
border:1px solid #e5e7eb;
表示エリアの枠線です。1pxを大きくすると枠線が太くなり、小さくすると細くなります。
border-radius:18px;
表示エリアとモーダルウインドウの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
width:calc(100% - 40px);
モーダルウインドウの横幅です。40pxを大きくすると画面左右の余白が広がり、モーダルの横幅は狭くなります。
max-width:420px;
モーダルウインドウの最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
padding:28px;
モーダルウインドウの内側余白です。値を大きくすると内容と外周の間隔が広がり、小さくすると狭くなります。
scale(.45)
開くアニメーション開始時の大きさです。.45は通常サイズの45%を表します。値を小さくすると、より小さな状態から大きくバウンドする動きになります。
scale(1.3)
開く途中で最も大きくなるサイズです。1.3は通常サイズの130%です。値を大きくすると最初の跳ね上がりが強くなります。
scale(.82)・scale(1.12)・scale(.96)
開く途中の縮小・再拡大に使用する値です。1との差を大きくするとバウンドが強くなり、1へ近づけると穏やかな動きになります。
animation:modal-open-close-bounce_open .7s ease forwards;
開くアニメーションの時間です。.7sは0.7秒を表します。値を大きくするとバウンドがゆっくりになり、小さくすると速くなります。
scale(1.18)・scale(.88)・scale(1.08)
閉じる途中の反動を作る値です。一度大きくしてから縮小し、もう一度少し大きくすることで、単純な縮小とは異なるバウンドを表現しています。
scale(.4)
閉じるアニメーション終了時の大きさです。.4は通常サイズの40%を表します。値を小さくすると、より小さく縮みながら消える動きになります。
animation:modal-open-close-bounce_close .6s ease forwards;
閉じるアニメーションの時間です。.6sは0.6秒を表します。JavaScriptの600ミリ秒と同じ時間に設定しています。変更する場合は両方を同じ時間に合わせてください。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによって表示エリアが画面幅に合わせて縮小されます。モーダルはwidth:calc(100% - 40px)とmax-width:420pxによって画面幅に合わせて調整されます。また、640px以下では表示エリアとモーダルのpaddingを24px 18pxへ変更しているため、スマートフォン・タブレット・PCで利用できます。
コメント