初心者向け！animatedModal.jsで魅力的なアニメーションモーダルを簡単に作成する完全ガイド｜DAD UNION

Web開発の現場では、ユーザーの注意を引きつける要素としてモーダルウィンドウが頻繁に使用されます。
今回は、アニメーションを取り入れたモーダル表示に特化したJavaScriptライブラリ、animatedModal.jsを使った具体的な実装方法を分かりやすく解説します。これにより、ユーザーの体験を向上させることが可能です。

Contents

はじめに
必要なファイル
HTMLの基本構造
CSSの設定
JavaScriptの実装
animatedModal.jsを使ってモーダル画面をアニメーション演出で表示するデモページ
ソース元：animatedModal.js
まとめ

はじめに

animatedModal.jsは、シンプルながらも効果的なアニメーション効果をモーダルウィンドウに適用できるJavaScriptライブラリです。このライブラリを使用することで、モーダルウィンドウの開閉時に様々なアニメーションを設定できます。本記事では、基本的な導入方法から、カスタマイズ例までを一つ一つ丁寧に説明していきます。

必要なファイル

animatedModal.jsを利用する前に、以下のファイルをプロジェクトに追加する必要があります。

animate.min.css – アニメーション効果のスタイルシート
jQuery – JavaScriptライブラリ
animatedModal.js – モーダルにアニメーション機能を追加するスクリプト

HTMLの基本構造

まずは、モーダルウィンドウを動作させるためのHTMLマークアップを準備します。モーダルを開くトリガーとなるリンクと、モーダルコンテンツを格納するコンテナが必要です。

モーダル表示リンク（id=”demo01″、id=”demo02″）とモーダルエリア（id=”demo1-modal”、id=”demo2-modal”）を用意します。モーダル表示リンクタグのhref（href=”#demo1-modal”、href=”#demo2-modal”）と表示するモーダルエリアのid（id=”demo1-modal”、id=”demo2-modal”）を一致させる必要があります。

<h1>animatedModal.jsを使ってモーダル画面をアニメーション演出で表示</h1>

<div><a id="demo01" href="#demo1-modal">ココをクリックするとモーダル1を表示</a></div>
<br>
<div><a id="demo02" href="#demo2-modal">ココをクリックするとモーダル2を表示</a></div>

<div id="demo1-modal">
  <div  id="btn-close-modal" class="close-demo1-modal"> 
  ココをクリックするとモーダル1をCLOSE
  </div>

  <div class="modal-content">
  モーダル1のコンテンツエリアです。
  </div>
</div>


<div id="demo2-modal">
  <div  id="btn-close-modal" class="close-demo2-modal"> 
  ココをクリックするとモーダル2をCLOSE
  </div>
    
  <div class="modal-content">
  モーダル2のコンテンツエリアです。
  </div>
</div>

CSSの設定

モーダルウィンドウとボタンの基本的なスタイリングを行います。ここでは、animate.min.cssを利用してアニメーションの準備をします。
「#btn-close-modal」はモーダルエリアの閉じるボタンのCSS記述です。

<link rel="stylesheet" href="animate.min.css">
<style>
* {
  padding: 0;
  margin: 0;
}
body {
  font-size: 18px;
  text-align: center;
}
h1{
  text-align: center;
  font-size: 24px;
  padding: 20px 0 40px 0;
}
#btn-close-modal {
  width:100%;
  text-align: center;
  cursor:pointer;
  color:#fff;
  text-decoration: underline;
  padding: 20px 0 40px 0;
}
</style>

JavaScriptの実装

jquery-3.4.1.min.jsファイルとanimatedModal.jsを読み込んだ後、具体的なアニメーション設定をJavaScriptで記述します。ここでは、animatedInとanimatedOutでアニメーションの種類を指定できます。

$(“モーダルエリアid”).animatedModal(オプション)を指定します。オプションではモーダル画面の表示演出方法やモーダル表示前後とCLOSE前後の処理を設定出来ます。

<script src="jquery-3.4.1.min.js"></script>
<script src="animatedModal.js"></script>
<script>
$("#demo01").animatedModal();

$("#demo02").animatedModal({
  animatedIn:'lightSpeedIn',
  animatedOut:'bounceOutDown',
  color:'#3498db',
  //以下にモーダル表示前後とCLOSE前後の処理を記述
  beforeOpen: function() {
  },    
  afterOpen: function() {
  }, 
  beforeClose: function() {
  }, 
  afterClose: function() {
  }
});
</script>