【CodePen】モーダルウィンドウのアイデア10選

💡 実装のポイント
jQueryで.modal_infoの中身を丸ごと.detach()し、動的生成した.modalへ差し込む設計。開閉は.modal・.modal_overlayに付与される.displayクラスのopacityとvisibilityをtransitionさせるだけとシンプル。閉じるボタンは:hoverでtransform: rotate(360deg) scale(1.1)というくるっと回る演出付き。中央寄せはcenter()関数内でwindowの高さとmodal.outerHeight()の差分から計算している。

💡 実装のポイント
.menu.openに切り替わると@-webkit-keyframes riseで画面下から立ち上がり、左右2分割の背景である.left・.rightがgrowkeyframesで幅1pxから50%へ伸びることで本を開くような演出になっている。閉じる際は.closingクラスを付けてfallアニメーション（3秒）を再生してから、jQueryの.delay().queue()で.open・.closingクラスを外すタイミング調整がポイント。

💡 実装のポイント
ボタンをクリックすると.to-circleクラスで丸型に変形し、続けて円形の背景レイヤー.cd-modal-bgをVelocity.jsのscaleアニメーションでウィンドウ全体を覆うサイズまで拡大する2段階構成。拡大率はscaleValue()関数でボタン位置から画面四隅までの最大距離を計算して算出している。閉じる際はEscキーにも対応（keyupイベントで監視）。

💡 実装のポイント
.modal-frameに.state-appear／.state-leaveを切り替えることで、SCSSのmodalComeIn（65.5%地点でscale(1.03)にオーバーシュートしてから1に収束）というバウンド感のあるkeyframesを再生。.modal-bodyはopacityとtransformを別途transitionさせているため、外枠と中身の登場タイミングがずれて見える演出になっている。アニメーション終了後は.state-leaveクラスを除去する後処理がJS側に必要。

💡 実装のポイント
CSSは書かず、Tailwind CSSのユーティリティクラスのみでレイアウトを構成。開閉はgsap.timeline()で#authOverlay→#second→#third→#fourthの順にscaleYやopacityを微妙にオフセット（"-=0.4"など）させながら連続再生する構成で、各要素の登場タイミングをずらすことで奥行きのある演出になっている。閉じる際はauthAnimation.reverse().timeScale(-1.6)でタイムラインを逆再生・倍速化しているだけなので実装はシンプル。

💡 実装のポイント
7種類の出現パターン（Unfolding／Revealing／Uncovering／Blow Up／Meep Meep／Sketch／Bond）が#modal-containerの.one〜.sevenクラスにそれぞれ独立したkeyframesとして定義されている大規模なSCSS構成。Sketchパターンだけは<svg><rect>のstroke-dashoffsetをアニメーションさせて枠線を描画する仕組みなので、抜き出す際はSVGごとコピーする必要がある。JSはボタンのidをそのままクラス名として付け替えているだけのシンプルな仕組み。

💡 実装のポイント
GSAPのDraggableプラグインでモーダル自体をドラッグ移動できるようにした変わり種。bounds: wrapperで移動範囲を親要素内に制限し、inertia: trueとthrowResistanceで指を離した後の慣性が効くようになっている。リセットボタンはTweenLite.toでxPercent／yPercentを初期値（中央寄せの-50, -50）に戻すだけのシンプルな実装。

💡 実装のポイント
画像専用のライトボックス型モーダル。$('<div id="overlay"></div>')をjQueryで動的に生成してページに追加し、クリックされた画像のhref属性から拡大表示用の画像パスを取得する仕組み。次へ・前へボタンは.closest('.image').next()／.prev()でDOM上の兄弟要素を辿って画像を切り替えているだけなので、配列を持たずに実装できている点が参考になる。

💡 実装のポイント
このPenはBot対策によりソースコードの直接取得ができませんでした。検索結果によると、CSS GridとFlexboxのみで構成されJavaScriptを一切使わない（:target疑似クラスを利用したCSSのみの実装と思われる）ライトボックスギャラリーとのことです。詳細な実装はCodePen上のPenで直接ご確認ください。

💡 実装のポイント
GSAPのFlipプラグインを使ったモダンな実装。Flip.getState()でクリックされた画像の現在位置・サイズを記録し、DOM上で.lightboxへ要素そのものを移動させた後にFlip.from()で「移動前の状態」から現在位置へアニメーションさせるFLIPテクニック（First・Last・Invert・Play）。画像を複製せず実要素を移動させるだけなので、CSSのbackdrop-filter: blur()と組み合わせて軽量に動作する。