![UXデザイナー 松木順子[ HuwaHuwa ]](https://huwahuwa.org/wp-content/uploads/2016/06/logo.png){kind=logo}
animatedModal.js
フラットデザインに合う素敵な動きのモーダルスクリプト。
ボヨヨーンとした動きが気持ちいいです。
サイトのデモでは、3種類のアニメーションを使ったモーダルを試せます。
アニメーションはanimate.cssを利用しているので、80種類以上のエフェクトが利用できるようです。すごい。
★ダウンロードとデモはこちら
http://joaopereirawd.github.io/animatedModal.js/
使い方
外部ファイルを読み込む
jQuery、animate.css、animatedModal.min.jsを読み込みます。
animatedModal.min.jsのディレクトリは利用環境に合わせて変えてください。
|
1 2 3 4 5 6 7 8 9 |
<head> ... <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css"> </head> <body> ... <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/animatedModal.min.js"></script> </body> |
HTML
モーダルウインドウを開くボタンとモーダルウインドウを実装します。
モーダルウインドウに使用しているid「animatedModal」はオプションで変更できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!-- ボタン --> <a id="demo01" href="#animatedModal">DEMO01</a> <!-- モーダルウインドウ --> <div id="animatedModal"> <!-- ウインドウを閉じるボタンには「class="close-animatedModal"」を付与 --> <div class="close-animatedModal"> CLOSE MODAL </div> <div class="modal-content"> <!-- モーダルウインドウのコンテンツ --> </div> </div> |
Java Script
ボタンをjQueryのセレクタで指定して、スクリプトを実行します。
スクリプトのオプションでは、モーダルウインドウのターゲットやアニメーションを変更できるようです。
アニメーションの種類はanimate.css参照です。
|
1 2 3 |
<script> $("#demo01").animatedModal(); </script> |
オプション
modalTarget (default: animatedModal)
モーダルウインドウのターゲット
color (default: #39BEB9)
背景色
animatedIn (default: zoomIn)
モーダルウインドウが表示される時のエフェクト
animatedOut (default: zoomOut)
モーダルウインドウが閉じる時のエフェクト
animationDuration (default: .6s)
アニメーションのタイミング
overflow (default: auto)
オーバーフローの有無
こちらの記事を参考にさせていただきました。
いつもお世話になっています。
★[JS]操作が気持ちいいさまざまなアニメーションでモーダルウインドウを表示させるスクリプト -animatedModal.js（コリス）
http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-animatedmodal.html
