動きのあるアニメーションで見せるモーダル animatedModal.js

動きのあるアニメーションで見せるモーダル animatedModal.js

animatedModal.js

フラットデザインに合う素敵な動きのモーダルスクリプト。
ボヨヨーンとした動きが気持ちいいです。
サイトのデモでは、3種類のアニメーションを使ったモーダルを試せます。
アニメーションはanimate.cssを利用しているので、80種類以上のエフェクトが利用できるようです。すごい。

★ダウンロードとデモはこちら
http://joaopereirawd.github.io/animatedModal.js/

使い方

外部ファイルを読み込む

jQuery、animate.css、animatedModal.min.jsを読み込みます。
animatedModal.min.jsのディレクトリは利用環境に合わせて変えてください。

HTML

モーダルウインドウを開くボタンとモーダルウインドウを実装します。
モーダルウインドウに使用しているid「animatedModal」はオプションで変更できます。

Java Script

ボタンをjQueryのセレクタで指定して、スクリプトを実行します。
スクリプトのオプションでは、モーダルウインドウのターゲットやアニメーションを変更できるようです。
アニメーションの種類はanimate.css参照です。

オプション

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

Back to Top