[CSS]モーダルウインドウをシンプルな操作とアニメーションでどれだけかっこよく表示できるかのデモ
Post on:2013年6月27日
トリガーはシンプルなクリック操作、そしてシンプルなアニメーションを使って、モーダルウインドウをいかにかっこよく表示するかのデモンストレーションを紹介します。
![サイトのキャプチャ](/wp-content/uploads-201301/2013062701-01.png)
デモはCSS3アニメーションを使用しているので、Chrome, Safari, Firefox, Operaなどのモダンブラウザでご覧ください。
![デモのキャプチャ](/wp-content/uploads-201301/2013062701-02.png)
デモは、全部で19種類のエフェクトがあります。
![サイトのキャプチャ](/wp-content/uploads-201301/2013062702.png)
モーダルウインドウのエフェクト19種類
アニメーションgifにして紹介しようと思ったけど、ちょっと重すぎるので断念。
どれもかっこいいのですが、オススメは下記でしょうか。
- Fade in & Scale
フェードで拡大しながら表示 - Fall
縮小しながら集まるように表示 - Sticky Up
上から張り付くように表示 - 3D Flip(Horizontal)
水平にくるっと回転して表示 - Just Me
全画面に表示 - Slit
真ん中に筋をいれて表示
特にかっこいいのが最後の「Slip from Top」、これだけアニメーションgifで。
![デモのアニメーション](/wp-content/uploads-201301/2013062703.gif)
Slip from Top
コンテンツが一旦奥に倒れ、上からモーダルウインドウがスライド表示します。
sponsors