[themeone_header type=”h2″ txtalign=”txt-left” subtitle=”” txtcolor=”accent-color1″ decor=”” decorcolor=”” decorheight=”2px”]
animatedModal.js
[/themeone_header]
フラットデザインに合う素敵な動きのモーダルスクリプト。
ボヨヨーンとした動きが気持ちいいです。
サイトのデモでは、3種類のアニメーションを使ったモーダルを試せます。
アニメーションはanimate.cssを利用しているので、80種類以上のエフェクトが利用できるようです。すごい。
★ダウンロードとデモはこちら
http://joaopereirawd.github.io/animatedModal.js/
[themeone_header type=”h3″ txtalign=”txt-left” subtitle=”” txtcolor=”accent-color1″ decor=”” decorcolor=”” decorheight=”2px”]
使い方
[/themeone_header]
[themeone_drop_cap letter=”1″ color=”accent-color2″ /]外部ファイルを読み込む
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> |
[themeone_drop_cap letter=”2″ color=”accent-color2″ /]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> |
[themeone_drop_cap letter=”3″ color=”accent-color2″ /]Java Script
ボタンをjQueryのセレクタで指定して、スクリプトを実行します。
スクリプトのオプションでは、モーダルウインドウのターゲットやアニメーションを変更できるようです。
アニメーションの種類はanimate.css参照です。
1 2 3 |
<script> $("#demo01").animatedModal(); </script> |
[themeone_header type=”h3″ txtalign=”txt-left” subtitle=”” txtcolor=”accent-color1″ decor=”” decorcolor=”” decorheight=”2px”]
オプション
[/themeone_header]
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
Facebookへコメントする