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

質問

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

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

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

http://tympanus.net/Development/ModalWindowEffects/

回答No.1

shockatz · ベストアンサー

CSS3のtransformですね。超シンプル。
transform: scale(0) rotate(720deg);

0.5秒で2回転。

お礼

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

回答No.3

tracer

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

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

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

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

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

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

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

お礼

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

回答No.2

sanzero

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;
}

お礼

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