【Javascript】多彩なアニメーションでモーダルウィンドウを表示できる「animatedModal.js」
Contents
【Javascript】多彩なアニメーションでモーダルウィンドウを表示できる「animatedModal.js」
CSS3のアニメーションを利用したホバー効果やツールチップ表示が増えてきていますが、今回はモーダルウィンドウをアニメーションで表示させるスクリプト「animatedModal.js」をご紹介します。
横からのスライド、バウンド、フェードと多彩なアニメーションの数は約80種。
1.ダウンロード
デモページのダウンロードボタンから最新版をダウンロードします。
2.animate.cssを読み込む
アニメーションは、animate.cssで制御します。
<head>タグ内で読み込みましょう。
[HTML]
<link rel=”stylesheet” href=”//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css”>
</head>
3.モーダル部分のHTMLを記述
<a>タグのhref属性と、モーダルウィンドウのコンテンツを囲む親divのidは同じ値にします。
また、ウィンドウを閉じるボタンのclassには、「close-animatedModal」を付与します。
[HTML]
<!–Call your modal–>
<a id=”demo01″ href=”#animatedModal”>DEMO01</a>
<!–DEMO01–>
<div id=”animatedModal”>
<div class=”close-animatedModal”>
CLOSE MODAL
</div>
<div class=”modal-content”>
<!–モーダルウィンドウのコンテンツ–>
</div>
</div>
</body>
4.jQueryとスクリプト本体を読み込む
</body>タグの直前で上記２ファイルを読み込みます。
[HTML]
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
<script src=”yourPath/animatedModal.min.js”></script>
</body>
5.スクリプトを記述
リンクに対し、スクリプトを記述します。
[JavaScript]
$(“#demo01”).animatedModal();
</script>
■アニメーションの種類
アニメーションの種類は、Animate.cssの通りです。上記のサイト上でデモを見ることができますので、好みのアニメーションを見つけてください。
アニメーションは、オプションで指定します。
■各オプション
modalTarget (初期値: animatedModal)
モーダルウインドウのターゲット
color (初期値: #39BEB9)
背景色
animatedIn (初期値: zoomIn)
モーダルウインドウが表示される時のエフェクト
animatedOut (初期値: zoomOut)
モーダルウインドウが閉じる時のエフェクト
animationDuration (初期値: .6s)
アニメーションのタイミング
overflow (default: auto)
オーバーフローの有無
■オプションの指定例
[JavaScript]
<script>
$(“#demo01”).animatedModal({
modalTarget:’modal-02′,
animatedIn:’lightSpeedIn’,
animatedOut:’bounceOutDown’,
color:’#3498db’,
});
</script>
アニメーションは、リッチなユーザーエクスペリエンスには欠かせない要素です。
こうしたプラグインを使えば、簡単に面白い効果を生み出すことができるので、ぜひ活用してみてください。