ゆきのふ

ぼかしながら開閉するモーダルウインドウの作り方 ぼかしながら開閉するモーダルウインドウの作り方を紹介します。このサンプルでは、「モーダルを開く」をクリックすると、ぼやけた状態のモーダルが徐々にはっきりしながら画面中央に表示されます。「閉じる...

回転しながら開閉するモーダルウインドウの作り方 モーダルウインドウは、現在のページを移動せずに補足情報や確認内容などを画面上へ表示できるUIです。今回は基本のモーダルウインドウをベースにして、開くときと閉じるときに回転アニメーションを加えま...

フェードイン・ズーム・背景ぼかしを組み合わせた高級感あるドロワー演出。モーダル風にふわっと登場するリッチアニメーション付きドロワーを、HTML・CSS・JSだけで簡単実装。WordPressのカスタムHTMLにコピペで完結！

WordPressのカスタムHTMLにコピペでOK。モーダルの開き方5種（Drawer/ Drop/ Bounce/ Blur/ Skew）をデモ付きで解説。HTML/CSS/JS全文＆コピー機能、背景クリック・ESC対応のアクセシブル実装です。

WordPressのカスタムHTMLにコピペでOK。モーダルの開き方5種（Fade/Slide/Zoom/Flip/Rotate）をデモ付きで解説。HTML/CSS/JS全文＆コピー機能、背景クリック・ESC対応のアクセシブル実装です。

上にスライドアウトして閉じるモーダルウインドウの作り方 上にスライドアウトして閉じるモーダルウインドウの作り方を紹介します。ボタンをクリックすると画面中央へモーダルウインドウが表示され、閉じるボタンをクリックするとモーダル本体が上方向へスラ...

下にスライドアウトして閉じるモーダルウインドウの作り方 下にスライドアウトして閉じるモーダルウインドウの作り方を紹介します。ボタンをクリックすると画面中央へモーダルウインドウが表示され、閉じるボタンをクリックするとモーダル本体が下方向へスラ...

右にスライドアウトして閉じるモーダルウインドウの作り方 右にスライドアウトして閉じるモーダルウインドウの作り方を紹介します。ボタンをクリックすると画面中央へモーダルウインドウが表示され、閉じるボタンをクリックするとモーダル本体が右方向へスラ...

左にスライドアウトして閉じるモーダルウインドウの作り方 左にスライドアウトして閉じるモーダルウインドウの作り方を紹介します。ボタンをクリックすると画面中央にモーダルウインドウが表示され、閉じるボタンをクリックするとモーダル本体が左方向へ移動...

画面上からスライドインするモーダルウインドウの作り方 画面上からスライドインするモーダルウインドウの作り方を紹介します。モーダルウインドウを表示すると、画面上部から滑らかにスライドしながら表示されるアニメーションを実装するサンプルです。フェ...