回転しながら開閉するモーダルウインドウの作り方
回転しながら開閉するモーダルウインドウの作り方を紹介します。モーダルを開くと少し回転した状態から正面へ戻りながら表示され、閉じると再び回転しながらフェードアウトして閉じるアニメーションを実装したサンプルです。HTML・CSS・JavaScriptのみで作成しているため、そのままコピーして利用できます。
お問い合わせ画面や管理画面、ECサイトの商品詳細、会員サイトのお知らせ表示など、ユーザーの注目を集めたい場面に適しています。開く動きと閉じる動きを統一することで、自然で分かりやすい画面遷移を演出できます。また、アニメーション時間や回転角度は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-rotate_wrap">
<!-- タイトル -->
<div class="modal-open-close-rotate_title">
回転開閉モーダル
</div>
<!-- 説明文 -->
<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_overlay"
data-modal-open-close-rotate-overlay>
<!-- モーダル本体 -->
<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>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>
/* ページ全体 */
body{
margin:0; /* 外側の余白 */
padding:40px 20px; /* 内側の余白 */
background:#ffffff; /* 背景色 */
font-family:sans-serif; /* フォント */
}
/* モーダル表示エリア */
.modal-open-close-rotate_wrap{
max-width:700px; /* 最大横幅：変更すると表示エリアの幅が変わる */
margin:40px auto; /* 上下余白・中央配置 */
padding:32px; /* 内側余白 */
border:1px solid #e5e7eb; /* 枠線 */
border-radius:18px; /* 角丸 */
background:#f8fafc; /* 背景色 */
text-align:center; /* 中央揃え */
box-sizing:border-box; /* paddingを幅に含める */
}
/* タイトル */
.modal-open-close-rotate_title{
margin:0 0 12px; /* 下余白 */
font-size:22px; /* 文字サイズ */
font-weight:700; /* 太字 */
}
/* 説明文 */
.modal-open-close-rotate_text{
margin:0 0 24px; /* 下余白 */
color:#4b5563; /* 文字色 */
line-height:1.8; /* 行間：値を大きくすると行間が広がる */
}
/* 開くボタン・閉じるボタン */
.modal-open-close-rotate_open,
.modal-open-close-rotate_close{
padding:10px 22px; /* 内側余白 */
border:none; /* 枠線なし */
border-radius:8px; /* 角丸 */
color:#ffffff; /* 文字色 */
font-size:16px; /* 文字サイズ */
font-weight:700; /* 太字 */
cursor:pointer; /* マウスカーソル */
}
/* モーダルを開くボタン */
.modal-open-close-rotate_open{
background:#2563eb; /* 背景色 */
}
/* モーダルを閉じるボタン */
.modal-open-close-rotate_close{
background:#111827; /* 背景色 */
}
/* モーダル背景 */
.modal-open-close-rotate_overlay{
display:none; /* 初期状態は非表示 */
position:fixed; /* 画面全体へ固定 */
inset:0; /* 画面全体に広げる */
z-index:9999; /* 最前面に表示 */
align-items:center; /* 縦中央 */
justify-content:center; /* 横中央 */
padding:20px; /* 画面端との余白 */
background:rgba(15,23,42,.55); /* 背景の暗さ：最後の数値を大きくすると濃くなる */
box-sizing:border-box; /* paddingを幅に含める */
}
/* モーダル表示時 */
.modal-open-close-rotate_overlay.is-active{
display:flex; /* モーダル背景を表示 */
}
/* モーダル本体 */
.modal-open-close-rotate_modal{
width:100%; /* 横幅 */
max-width:420px; /* 最大横幅：変更するとモーダルの幅が変わる */
padding:28px; /* 内側余白 */
border-radius:18px; /* 角丸 */
background:#ffffff; /* 背景色 */
text-align:left; /* 左揃え */
box-shadow:0 20px 40px rgba(0,0,0,.2); /* 影 */
box-sizing:border-box; /* paddingを幅に含める */
animation:modal-open-close-rotate_in .45s ease forwards; /* .45秒で回転表示：値を大きくすると遅く、小さくすると速くなる */
}
/* モーダルを閉じる時 */
.modal-open-close-rotate_modal.is-closing{
animation:modal-open-close-rotate_out .45s ease forwards; /* .45秒で回転しながら閉じる：JavaScriptの450ミリ秒と合わせる */
}
/* モーダルタイトル */
.modal-open-close-rotate_modal-title{
margin:0 0 12px; /* 下余白 */
font-size:22px; /* 文字サイズ */
font-weight:700; /* 太字 */
}
/* モーダル本文 */
.modal-open-close-rotate_modal-text{
margin:0 0 24px; /* 下余白 */
color:#4b5563; /* 文字色 */
line-height:1.8; /* 行間：値を大きくすると行間が広がる */
}
/* 開く時の回転アニメーション */
@keyframes modal-open-close-rotate_in{
from{
opacity:0; /* 透明な状態から開始 */
transform:rotate(-12deg) scale(.9); /* 左へ12度回転・0.9倍から開始 */
}
to{
opacity:1; /* 完全に表示 */
transform:rotate(0deg) scale(1); /* 正面・通常サイズへ戻す */
}
}
/* 閉じる時の回転アニメーション */
@keyframes modal-open-close-rotate_out{
from{
opacity:1; /* 表示状態から開始 */
transform:rotate(0deg) scale(1); /* 正面・通常サイズから開始 */
}
to{
opacity:0; /* 完全に透明にする */
transform:rotate(12deg) scale(.9); /* 右へ12度回転・0.9倍へ縮小 */
}
}
/* 画面幅640px以下 */
@media (max-width:640px){
/* モーダル表示エリア */
.modal-open-close-rotate_wrap{
padding:24px 18px; /* 狭い画面用の内側余白 */
}
}
// モーダルを開くボタンを取得
const rotateModalOpen=document.querySelector("[data-modal-open-close-rotate-open]");
// モーダルを閉じるボタンを取得
const rotateModalClose=document.querySelector("[data-modal-open-close-rotate-close]");
// モーダル背景を取得
const rotateModalOverlay=document.querySelector("[data-modal-open-close-rotate-overlay]");
// モーダル本体を取得
const rotateModal=document.querySelector("[data-modal-open-close-rotate-modal]");
// 開くボタンをクリックした時
rotateModalOpen.addEventListener("click",function(){
// 閉じるアニメーション用クラスを外す
rotateModal.classList.remove("is-closing");
// モーダルを表示
rotateModalOverlay.classList.add("is-active");
});
// 閉じるボタンをクリックした時
rotateModalClose.addEventListener("click",function(){
// 回転しながら閉じるクラスを付ける
rotateModal.classList.add("is-closing");
// 450ミリ秒後に非表示：CSSの .45秒と合わせる
setTimeout(function(){
// モーダル背景を非表示
rotateModalOverlay.classList.remove("is-active");
// 次回表示用にクラスを外す
rotateModal.classList.remove("is-closing");
},450);
});
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでモーダルの構造を作成し、CSSで回転しながら開閉するアニメーションやデザインを設定し、JavaScriptでモーダルの表示・非表示を制御します。シンプルな構成のため、初心者でもファイルごとの役割を理解しながら導入できます。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはモーダルウインドウ本体と開閉ボタンを配置するファイルです。タイトルや本文など表示する内容を編集できます。
style.cssはモーダルのデザインと回転アニメーションを管理します。色・余白・角丸・影・アニメーション時間・回転角度などを変更できます。
script.jsはモーダルを開閉する処理を担当します。開くボタン・閉じるボタンの動作や、閉じるアニメーション終了後にモーダルを非表示へ切り替える処理を実装しています。
設置方法・使い方
3つのファイルをsampleフォルダへ配置し、index.htmlをブラウザで開くと利用できます。ページ内の「モーダルを開く」ボタンをクリックすると回転しながら表示され、「閉じる」ボタンをクリックすると回転しながら閉じる動作を確認できます。
カスタマイズできる内容
index.htmlではタイトルや本文、ボタンの文字を変更できます。style.cssではボタンやモーダルの色、サイズ、余白、角丸、影、背景色、回転角度、アニメーション時間などを自由に変更できます。script.jsでは開閉処理や閉じるタイミングを調整できます。
数値調整
style.cssのanimation: .45sは開閉アニメーション時間です。値を大きくするとゆっくり回転し、小さくすると素早く動作します。
style.cssのrotate(-12deg)とrotate(12deg)は回転角度です。角度を大きくすると回転演出が強くなり、小さくすると自然な動きになります。
script.jsのsetTimeout(...,450)は閉じるアニメーション完了まで待機する時間です。CSSのアニメーション時間と同じ値に設定してください。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssではwidth:100%とmax-widthを使用してモーダル幅を自動調整し、さらにmedia queryで画面幅640px以下の余白を最適化しています。そのため、スマートフォン・タブレット・PCでもレイアウトを崩さず利用できます。
コメント