on:2015年3月4日sponsors最近のUIの傾向として、ユーザーが操作して楽しくなるようなアニメーションは大切なポイントです。そんな気持ちいいCSS3のアニメーションでモーダルウインドウをページ全体に表示するjQueryのプラグインを紹介します。横からアニメみたいにひゅっとスライドさせたり、ぼい~んとバウンドさせたり、気持ちよくて面白いものが簡単に実装できます。-GitHubanimatedModal.jsのデモanimatedModal.jsの使い方animatedModal.jsのデモデモでは、3種類のアニメーションを使ったモーダルウインドウを試せます。アニメーションはanimate.cssを利用しているので、80種類以上のエフェクトが利用できます。デモページ各モーダルウインドウをアニメーションGIFにしてみました。外部宇ファイル当スクリプトとjquery.jsとanimate.cssを外部ファイルとして記述します。HTMLモーダルウインドウを開くボタンとモーダルウインドウを実装します。モーダルウインドウに使用しているid「animatedModal」はオプションで変更できます。JavaScriptボタンをjQueryのセレクタで指定し、スクリプトを実行します。$("#demo01").animatedModal();</script>スクリプトのオプションでは、モーダルウインドウのターゲットやアニメーションを変更できます。アニメーションの種類はanimated.cssをご覧ください。Posts関連記事が見つかりませんでした。