[CSS]モーダルウインドウをシンプルな操作とアニメーションでどれだけかっこよく表示できるかのデモ

トリガーはシンプルなクリック操作、そしてシンプルなアニメーションを使って、モーダルウインドウをいかにかっこよく表示するかのデモンストレーションを紹介します。

サイトのキャプチャ

NIFTY MODAL WINDOW EFFECTS

デモはCSS3アニメーションを使用しているので、Chrome, Safari, Firefox, Operaなどのモダンブラウザでご覧ください。

デモのキャプチャ

デモページ

デモは、全部で19種類のエフェクトがあります。

サイトのキャプチャ

モーダルウインドウのエフェクト19種類

アニメーションgifにして紹介しようと思ったけど、ちょっと重すぎるので断念。
どれもかっこいいのですが、オススメは下記でしょうか。

  • Fade in & Scale
    フェードで拡大しながら表示
  • Fall
    縮小しながら集まるように表示
  • Sticky Up
    上から張り付くように表示
  • 3D Flip(Horizontal)
    水平にくるっと回転して表示
  • Just Me
    全画面に表示
  • Slit
    真ん中に筋をいれて表示

特にかっこいいのが最後の「Slip from Top」、これだけアニメーションgifで。

デモのアニメーション

Slip from Top

コンテンツが一旦奥に倒れ、上からモーダルウインドウがスライド表示します。

top of page

©2017 coliss