ぼかしアニメーションで開閉するモーダルウインドウの作り方
ぼかしアニメーションで開閉するモーダルウインドウの作り方を紹介します。モーダルを開くとぼかしが徐々に解除されながら表示され、閉じると再びぼかしが強くなりながら非表示になるサンプルです。HTML・CSS・JavaScriptだけで実装できるため、ライブラリを使わずに導入できます。
シンプルなフェードだけでは物足りない場合や、管理画面・お問い合わせ画面・設定画面・会員サイトなどで、少し印象的な開閉演出を加えたい場合に利用できます。アニメーション時間やぼかしの強さはCSSから簡単に変更できるため、サイト全体のデザインに合わせて調整しやすい構成です。
サンプルでは「モーダルを開く」ボタンを押すとぼかしが解除されながら表示され、「閉じる」ボタンを押すとぼかしながら閉じます。レスポンシブにも対応しているため、スマートフォン・タブレット・PCでそのまま利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
開くとぼかしが解除されながら、下からゆっくり浮き上がるように表示されます。
「モーダルを開く」をクリックすると、ぼかしが解除されながら下からゆっくり浮き上がります。「閉じる」をクリックすると、ぼかしながら少し下へ移動して閉じます。
コードをコピーして使おう！
<!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-blur_wrap">
<!-- タイトル -->
<div class="modal-open-close-blur_title">
ぼかし開閉モーダル
</div>
<!-- 説明文 -->
<p class="modal-open-close-blur_text">
開くとぼかしが解除されながら、下からゆっくり浮き上がるように表示されます。
</p>
<!-- モーダルを開くボタン -->
<button
class="modal-open-close-blur_open"
type="button"
data-modal-open-close-blur-open>
モーダルを開く
</button>
</div>
<!-- モーダル背景 -->
<div
class="modal-open-close-blur_overlay"
data-modal-open-close-blur-overlay>
<!-- モーダル本体 -->
<div
class="modal-open-close-blur_modal"
role="dialog"
aria-modal="true"
aria-labelledby="modal-open-close-blur-title"
data-modal-open-close-blur-modal>
<!-- モーダルタイトル -->
<div
class="modal-open-close-blur_modal-title"
id="modal-open-close-blur-title">
モーダルタイトル
</div>
<!-- モーダル本文 -->
<p class="modal-open-close-blur_modal-text">
ぼかしが解除されながら浮き上がる開閉アニメーションを確認できます。
</p>
<!-- モーダルを閉じるボタン -->
<button
class="modal-open-close-blur_close"
type="button"
data-modal-open-close-blur-close>
閉じる
</button>
</div>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>ファイル構成と設置方法
このサンプルは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フォルダへ配置します。
③ sample/index.htmlをブラウザで開きます。
④ 「モーダルを開く」をクリックすると、ぼかしが解除されながら下から浮き上がるように表示されます。
⑤ 「閉じる」をクリックすると、ぼかしながら少し下へ移動して閉じます。
カスタマイズできる内容
・index.htmlでは、ページタイトル、表示エリアのタイトル・説明文、モーダルタイトル、モーダル本文、各ボタンの文字を変更できます。
・style.cssでは、表示エリアやモーダルの横幅、背景色、文字色、余白、角丸、影、ボタンの色、背景オーバーレイの濃さを変更できます。
・style.cssの「filter:blur(16px);」と「filter:blur(12px);」を変更すると、開くときと閉じるときのぼかしの強さを調整できます。
・style.cssの「translateY(28px)」と「translateY(16px)」を変更すると、モーダルが上下へ移動する距離を調整できます。
・style.cssの「scale(.96)」と「scale(.97)」を変更すると、アニメーション開始時と終了時のモーダルサイズを調整できます。
数値調整
・style.cssの「animation:modal-open-close-blur_in .7s ease-out forwards;」の「.7s」は0.7秒を表します。値を大きくするとゆっくり浮き上がり、小さくすると速く表示されます。
・style.cssの「animation:modal-open-close-blur_out .45s ease forwards;」の「.45s」は0.45秒を表します。値を大きくするとゆっくり閉じ、小さくすると速く閉じます。
・script.jsの「setTimeout(…,450);」の「450」は450ミリ秒（0.45秒）を表します。閉じるアニメーションの「.45s」と同じ時間に設定してください。
・style.cssの「filter:blur(16px);」の「16px」を大きくすると、表示開始時のぼかしが強くなります。
・style.cssの「translateY(28px)」の「28px」を大きくすると、より下から浮き上がる動きになります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssでモーダル本体に「width:100%;」「max-width:420px;」を設定し、背景オーバーレイに「padding:20px;」を指定しているため、画面幅に応じてモーダルのサイズと画面端の余白が自動調整されます。また、画面幅640px以下ではメディアクエリによって表示エリアの余白を「24px 18px」に変更しているため、スマートフォン・タブレット・PCで利用できます。
コメント