回転しながら開閉するモーダルウインドウの作り方
モーダルウインドウは、現在のページを移動せずに補足情報や確認内容などを画面上へ表示できるUIです。今回は基本のモーダルウインドウをベースにして、開くときと閉じるときに回転アニメーションを加えます。「モーダルを開く」をクリックすると、少し傾いた状態から回転しながら画面中央へ表示されます。
開くときはCSSのtransformを使って、モーダルをrotate(-12deg)の状態からrotate(0)まで回転させます。「閉じる」をクリックすると反対側のrotate(12deg)まで回転しながら透明になり、その後モーダルを非表示にします。3D回転ではなく、画面と平行な状態のまま回転するシンプルな2D回転アニメーションです。
お知らせや確認画面、会員サイト、管理画面など、通常のモーダルに少し動きを加えて表示したい場面で利用できます。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-rotate_wrap">
<!-- タイトル -->
<h1 class="modal-open-close-rotate_title">
回転開閉モーダル
</h1>
<!-- 説明文 -->
<p class="modal-open-close-rotate_text">
モーダルを開くと回転しながら表示され、閉じると反対方向へ回転しながら非表示になります。
</p>
<!-- モーダルを開くボタン -->
<button class="modal-open-close-rotate_open" type="button" data-modal-open-close-rotate-open="">
モーダルを開く
</button>
</div>
<!-- モーダル本体 -->
<div class="modal-open-close-rotate_modal" role="dialog" aria-modal="true" aria-labelledby="modal-open-close-rotate-title" data-modal-open-close-rotate-modal="">
<!-- モーダルタイトル -->
<div class="modal-open-close-rotate_modal-title" id="modal-open-close-rotate-title">
モーダルタイトル
</div>
<!-- モーダル本文 -->
<p class="modal-open-close-rotate_modal-text">
回転しながら開閉するアニメーションを確認できます。
</p>
<!-- モーダルを閉じるボタン -->
<button class="modal-open-close-rotate_close" type="button" data-modal-open-close-rotate-close="">
閉じる
</button>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでモーダルウインドウを配置し、CSSで画面中央への配置と回転アニメーションを設定します。JavaScriptでは「モーダルを開く」「閉じる」のクリックに合わせて表示状態を切り替え、閉じるアニメーションが終了してからモーダルを非表示にします。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlは回転しながら開閉するモーダルウインドウを構成するファイルです。タイトル・説明文・「モーダルを開く」ボタンと、画面中央へ表示するモーダルタイトル・本文・「閉じる」ボタンを配置しています。index.htmlからstyle.cssとscript.jsを読み込んで使用します。
style.cssは通常画面とモーダルウインドウのデザイン、画面中央への配置、開閉時の回転アニメーションを設定するファイルです。@keyframesを使い、開くときはrotate(-12deg)からrotate(0)へ、閉じるときはrotate(0)からrotate(12deg)へ変化させます。
script.jsはモーダルウインドウの表示・非表示を制御するファイルです。「モーダルを開く」をクリックするとis-activeクラスを追加します。「閉じる」をクリックするとis-activeを削除してis-closingクラスを追加し、450ミリ秒後にis-closingを削除してモーダルを非表示にします。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。index.htmlからstyle.cssとscript.jsが読み込まれます。「モーダルを開く」をクリックすると、モーダルが左へ少し傾いた小さな状態から回転しながら画面中央へ表示されます。「閉じる」をクリックすると反対方向へ回転しながら小さくなり、そのまま非表示になります。
カスタマイズできる内容
index.htmlでは通常画面のタイトル・説明文、モーダルのタイトル・本文、開くボタンと閉じるボタンの文字を変更できます。style.cssではモーダルの横幅、余白、角丸、影、回転角度、拡大率、アニメーション時間などを変更できます。rotate()の角度を調整すると回転量を変更でき、scale()を調整すると開閉時の拡大・縮小量を変更できます。
数値調整
style.css
max-width:700px;
通常画面の表示エリアの最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
通常画面の上下余白です。40pxを大きくすると上下の間隔が広がります。autoによって左右中央へ配置しています。
padding:32px;
通常画面の内側余白です。値を大きくすると内容と枠線の間隔が広がり、小さくすると狭くなります。
border-radius:18px;
通常画面とモーダルウインドウの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
通常画面とモーダルのタイトル文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。
padding:12px 24px;
「モーダルを開く」ボタンの内側余白です。上下の12pxを大きくするとボタンが高くなり、左右の24pxを大きくすると横に広がります。
width:calc(100% - 40px);
モーダルウインドウの横幅です。画面幅から40pxを引くことで左右に余白を確保します。40pxを大きくすると画面端との余白が広がります。
max-width:420px;
モーダルウインドウの最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
padding:28px;
モーダルウインドウの内側余白です。値を大きくすると内容と外周の間隔が広がり、小さくすると狭くなります。
rotate(-12deg)
モーダルを開くアニメーションの開始角度です。負の角度を大きくすると、より左へ傾いた状態から回転します。
rotate(12deg)
モーダルを閉じるアニメーションの終了角度です。値を大きくすると、閉じるときの右方向への回転量が大きくなります。
scale(.9)
開始時と終了時のモーダルの大きさです。.9は通常サイズの90%を表します。値を小さくすると、開閉時の拡大・縮小が大きくなります。
.45s
開くアニメーションと閉じるアニメーションの時間です。値を大きくするとゆっくり回転し、小さくすると速く回転します。JavaScriptの450ミリ秒と同じ時間に設定します。
box-shadow:0 20px 40px rgba(0,0,0,.2);
モーダルウインドウの影です。20pxを大きくすると影が下方向へ移動し、40pxを大きくするとぼかしが広がります。最後の.2を大きくすると影が濃くなります。
レスポンシブ対応
モーダル本体にはwidth:calc(100% - 40px);とmax-width:420px;を設定しているため、画面幅が狭くなっても左右に余白を残して表示されます。さらに画面幅が640px以下になると、メディアクエリによって通常画面の内側余白を24px 18px、モーダル本体の内側余白も24px 18pxへ変更し、スマートフォンでも内容を確認しやすい表示に調整します。
コメント