[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

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