本記事では、animatedModal.jsというjQueryプラグインを用いて、フルスクリーンかつanimate.cssを用いた様々なアニメーションの適用したモーダルウィンドウをページへ実装する方法について、ご紹介させて頂きます。
✅ 「 animatedModal.js 」 の活用方法が分かる
✅ サンプルページを用いて、動作の確認が出来る
✅ animate.cssを用いて、様々なアニメーションを適用させる方法がわかる
animatedModal.jsとは??
公式ページ上では、以下のように説明されております。
animatedModal.jsは、CSS3トランジションを使用してフルスクリーンモーダルを作成するためのjQueryプラグインです。animate.cssからのトランジションを使用するか、独自のトランジションを作成できます。
作り自体は、jQueryがベースになっておりますが、使い方を理解していればjQueryが少し苦手な方でも簡単に使うことが可能なものになります。
また、animate.cssにて公開されているアニメーションは、全て適用させてあげることが可能ですので、公式ページ上で紹介されている3つのみではなく、様々なアニメーションを設定してあげることが可能です！！
以下、今回のDEMOになります。
animatedModal.jsの使い方
animatedModal.jsを使っていくためには、公式ページより必要なファイルをダウンロードしてくる必要があります。
ダウンロードから実装方法まで順番に確認していきましょう。
ダウンロード
公式ページを開く
少し下の方にスクロールすると、次のような Downloadボタンがあるので、クリック
⇨ すると、ダウンロードが始まリますので、デスクトップに保存しましょう。
以下、zipファイルの解凍手順になります。
ファイルの解凍まで終わりましたら、準備完了です。
ベースとなるHTMLファイルを用意
ダウンロードが完了したところで、実際にサンプルコードを用いながら、一緒に活用方法を確認していきましょう。
まずは、ベースとなるHTMLファイルを用意する必要がありますので、以下のコードをコピペして、作成してください。
保存先は、先程、解凍したフォルダ(animatedModal.js-master)内にあるdemoフォルダ内になります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modal_sample</title>
</head>
<body>
<div class="main">
<!-- モーダルを表示させるためのボタンを配置 -->
<ul class="modal_main">
<li><a id="modal1" href="#modal-01">modal1</a></li>
<li><a id="modal2" href="#modal-02">modal2</a></li>
<li><a id="modal3" href="#modal-03">modal3</a></li>
</ul>
</div>
</body>
</html>必要なファイルを読み込む
ベースとなるHTMLファイルの作成が終わりましたら、jQueryファイルを含め、必要なファイルを読み込んでいきましょう。
保存して頂いた場所には、以下のようにcssフォルダとjsフォルダがありますが、その中に入っているファイルは、今後、animatedmodal.jsを扱う上で必ず必要になりますので、覚えておいてくださいね。
必要なファイルを読み込んだ後のコードは以下のようになっております。
head要素内にanimate.cssを含むCSSファイルを、body要素の末には、jQueryに加え、animatedModal.jsを読み込んでいます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- アニメーションを適用させる上で、必要なファイルを読み込む -->
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/animate.min.css">
<!-- -->
<title>Modal_sample</title>
</head>
<body>
<div class="main">
<!-- モーダルを表示させるためのボタンを配置 -->
<ul class="modal_main">
<li><a id="modal1" href="#modal-01">modal1</a></li>
<li><a id="modal2" href="#modal-02">modal2</a></li>
<li><a id="modal3" href="#modal-03">modal3</a></li>
</ul>
</div>
<!-- jQueryを読み込む -->
<script src="js/jquery.min.js"></script>
<!-- -->
<!-- animatedModal.jsを読み込む -->
<script src="js/animatedModal.js"></script>
<!-- -->
</body>
</html>実装
ファイルの読み込みに関するコードを記述し終えたら、仕上げとして、フルスクリーンモーダルウィンドウの実装をしていきましょう。
以下の3つのパターンを順番に紹介しますので、閉じるボタンも含めて、一つずつ記述できるようになってもらえればと思います。
全て終わりますと、DEMOページと同じになります！
Zoom : デフォルト
[ body要素へ以下のコードを追加 ]
<div id="animatedModal">
<!-- 閉じるボタンに関する記述 -->
<!-- class="close-id名" なるので、コピペした時は修正のし忘れに注意する -->
<div id="btn-close-modal" class="close-animatedModal">
<span class="dli-close">close</span>
</div>
<!-- -->
<div class="modal-content">
<!-- ここにモーダル上に表示したい内容を記述する -->
</div>
</div>[ JavaScriptコードをbody要素の終了タグの上に配置 ]
<script>
// id属性として、modal1が適用されている要素がクリックされた際にanimatedModal()が呼び出される
// 表示するアニメーション及び閉じるアニメーションを指定しない場合は、アニメーションとして、Zoomが適用される
$("#modal1").animatedModal();
</script>[ 閉じるボタン含む各種CSSをhead要素内に記述 ]
閉じるボタン含む各種CSSについては、3つのパターンとも同様でOKであるため、以下のコードで全てになります。
<style>
.modal_main {
list-style: none;
padding-top: 3em;
display: flex;
}
#modal1, #modal2, #modal3 {
padding: 10px;
margin: 10px;
font-size: 25px;
text-decoration: none;
color: blueviolet;
background-color: aquamarine;
}
#modal1:hover, #modal2:hover, #modal3:hover {
color: rgb(255, 120, 83);
}
/* 閉じるボタンを統一 */
#btn-close-modal{
width:100%;
text-align: right;
font-size: 40px;
color:#fff;
margin:15px 20px 0px -20px;
padding-right:50px;
}
.dli-close:hover {
color: rgb(255, 192, 83);
}
</style>animate.cssを活用
[ body要素へ以下のコードを追加 ]
<!--DEMO02-->
<div id="modal-02">
<!-- 閉じるボタンに関する記述 -->
<!-- class="close-id名" なるので、コピペした時は修正のし忘れに注意する -->
<div id="btn-close-modal" class="close-modal-02">
<span class="dli-close">close</span>
</div>
<div class="modal-content">
<!-- ここにモーダル上に表示したい内容を記述する -->
</div>
</div>[ JavaScriptコードをbody要素の終了タグの上に配置 ]
animate.cssは既にhead要素で読み込んでますので、公式ページの右側から好きなアニメーションを選び、設定することで、モーダル表示/閉じるの際のアニメーションとして簡単に指定できます。
私は、今回、「rotateIn」を選択しました！
<script>
// id属性として、modal2が適用されている要素がクリックされた際にanimatedModal()が呼び出される
$("#modal2").animatedModal({
animatedIn:'rotateIn', //表示する時のアニメーション
animatedOut:'fadeOut', //閉じる時のアニメーション
color:'#3498db',
});
</script>
アニメーションの秒数指定
[ body要素へ以下のコードを追加 ]
<!--DEMO03-->
<div id="modal-03">
<!-- 閉じるボタンに関する記述 -->
<!-- class="close-id名" なるので、コピペした時は修正のし忘れに注意する -->
<div id="btn-close-modal" class="close-modal-03">
<span class="dli-close">close</span>
</div>
<div class="modal-content">
<!-- ここにモーダル上に表示したい内容を記述する -->
</div>
</div>[ JavaScriptコードをbody要素の終了タグの上に配置 ]
<script>
//modal3
$("#modal3").animatedModal({
animatedIn:'bounceInUp', //表示する時のアニメーション
animatedOut:'bounceOutDown', //閉じる時のアニメーション
animationDuration:'1s', //アニメーションにかける秒数
});
</script>
完成版については、DEMOページを開いて頂いた後に、ページ上で右クリックして頂き、メニューから「ページのソース表示」を選択して頂くと、確認して頂くことが可能で御座います。
動作確認
最後に動作の確認を行っていきましょう。
以下のDEMOページと同様に動作すれば、完璧です！
[ 初期表示 ]
まとめ
⇨ CSS3トランジションを使用してフルスクリーンモーダルを作成するためのjQueryプラグインです。
✅ 「 animatedModal.js 」 の活用方法
⇨ jQueryファイルを含む必要なファイルを読み込み、設定用のJavaScriptコードを配置することで利用可能です。✅ 「 animate.css 」
⇨ CSSベースの様々なアニメーションが公開されているライブラリになります。
コメント