[JS]操作が気持ちいいさまざまなアニメーションでモーダルウインドウを表示させるスクリプト -animatedModal.js

Post on:2015年3月4日

最近のUIの傾向として、ユーザーが操作して楽しくなるようなアニメーションは大切なポイントです。そんな気持ちいいCSS3のアニメーションでモーダルウインドウをページ全体に表示するjQueryのプラグインを紹介します。

横からアニメみたいにひゅっとスライドさせたり、ぼい～んとバウンドさせたり、気持ちよくて面白いものが簡単に実装できます。

サイトのキャプチャ

animatedModal.js
animatedModal.js -GitHub

animatedModal.jsのデモ

デモでは、3種類のアニメーションを使ったモーダルウインドウを試せます。
アニメーションはanimate.cssを利用しているので、80種類以上のエフェクトが利用できます。

サイトのキャプチャ

デモページ

各モーダルウインドウをアニメーションGIFにしてみました。

デモのアニメーション

デモページ：Demo 1
In: zoomIn, Out: bounceOut

デモのアニメーション

デモページ：Demo 2
In: lightSpeedIn, Out: bounceOutDown

デモのアニメーション

デモページ：Demo 3
In: bounceIn, Out: bounceOut

animatedModal.jsの使い方

Step 1: 外部宇ファイル

当スクリプトとjquery.jsとanimate.cssを外部ファイルとして記述します。

<head>
  ...
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css">
</head>
<body>
  ...
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="yourPath/animatedModal.min.js"></script>
</body>

Step 2: HTML

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

<!-- ボタン -->
<a id="demo01" href="#animatedModal">DEMO01</a>

<!-- モーダルウインドウ -->
<div id="animatedModal">
  <!-- ウインドウを閉じるボタンには「class="close-animatedModal"」を付与 -->
  <div class="close-animatedModal"> 
    CLOSE MODAL
  </div>
  
  <div class="modal-content">
    <!-- モーダルウインドウのコンテンツ -->
  </div>
</div>

Step 3: JavaScript

ボタンをjQueryのセレクタで指定し、スクリプトを実行します。

<script>
  $("#demo01").animatedModal();
</script>

スクリプトのオプションでは、モーダルウインドウのターゲットやアニメーションを変更できます。
アニメーションの種類はanimated.cssをご覧ください。

modalTarget (default: animatedModal)
モーダルウインドウのターゲット
color (default: #39BEB9)
背景色
animatedIn (default: zoomIn)
モーダルウインドウが表示される時のエフェクト
animatedOut (default: zoomOut)
モーダルウインドウが閉じる時のエフェクト
animationDuration (default: .6s)
アニメーションのタイミング
overflow (default: auto)
オーバーフローの有無

sponsors

top of page

©2024 coliss