モーダルウィンドウの作り方

下記のURLのサイトに様々なモーダルウィンドウが載っています。

項目別に違ったモーダルのアクションが表示されます。
中にNewspaperという項目があります。ウィンドウが回転して表示されるのですが、どのようにしてこの回転を実現しているのでしょうか？

jQuery、javascriptについて知識をお持ちの方、よろしければ質問に答えていただけると幸いです。

http://tympanus.net/Development/ModalWindowEffec …

No.1 ベストアンサー 回答者： shockatz 回答日時： 2014/11/03 01:15

CSS3のtransformですね。

超シンプル。
transform: scale(0) rotate(720deg);

0.5秒で2回転。

この回答へのお礼

どなたにベストアンサーするか悩みましたが一番最初に回答していただいたのでshockatzさんをベストアンサーに選ばせていただきました。

お礼日時：2014/11/03 16:02

No.3 回答者： tracer 回答日時： 2014/11/03 02:48

既に回答は出ていますが、少し違う言い方をしてみます。

動きのあるエフェクトは、CSS3以前なら間違いなくJavaScriptが使用されていましたが、CSS3の普及が進み、今ではかなりのエフェクトがCSSだけでできるようになっています。ただ、完全に100%CSSのみで実装するケースは多くなく、ほとんどの場合は、「きっかけ」にあたるスイッチをJavaScriptで実装します。100%CSSでも実装できますが、管理面などからJavaScriptを採用されるケースが多いです。

たとえば例の場合であれば、最初にアニメーションをCSSのclassで定義して、

.rotate{
//回転させる記述
}


JavaScript側でクラスを指定してあげます。

$("#taget").on("click",function(){
　//classを指定する記述
});


こうすれば、JavaScript側ではほんとに単純な記述をし、CSS側でアニメーションの内容を指定することができるため、管理的に分かりやすいです。

この回答へのお礼

詳しくありがとうございます！CSS３以前のお話からしていただき勉強になりました！

お礼日時：2014/11/03 16:01

No.2 回答者： sanzero 回答日時： 2014/11/03 01:18

css3で表現しているようですね。

<div class="md-modal md-effect-4 md-show" id="modal-4">
内の
<div class="md-content">
のスタイルを確認してみましょう。

/*非表示時*/
.md-effect-4 .md-content {
-webkit-transform: scale(0) rotate(720deg);
-moz-transform: scale(0) rotate(720deg);
-ms-transform: scale(0) rotate(720deg);
transform: scale(0) rotate(720deg);
opacity: 0;
}
/*表示時*/
.md-show.md-effect-4 .md-content {
-webkit-transform: scale(1) rotate(0deg);
-moz-transform: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
}
/*切り替えの効果*/
.md-show.md-effect-4 ~ .md-overlay, .md-effect-4 .md-content {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}

この回答へのお礼

ありがとうございます！助かりました！！

お礼日時：2014/11/03 15:59