menu

想像とシンプル/体温を感じるWEBサービス
WEB DISIGNERS Blog

2016/05/15
  • JQuery

複数のアニメーションで表示できるモーダルウィンドウ animatedModal.js の使い方

複数のアニメーション付きでモーダルウィンドウを表示するjQueryプラグイン。全画面表示で魅力的なアニメーションのモーダルウィンドウが簡単に設置できます。
animatedModal

使用方法

ダウンロード

animatedModal.js
animate.css

準備するファイル

・jquery.js


・animatedModal.js


・animate.css

外部ファイルの読み込み

head内へ以下を追加します。

HTML

最初にaタグでモーダルウィンドウを開くためのリンクを作成します。
モーダルウィンドウの中にCLOSEボタンを設置するのを忘れないように。


JavaScript

<head>〜</head>内に以下のScriptを埋め込みます。
アニメーションの種類はコチラからAnimate.css

animate.cssを使用するので80種類以上のエフェクトが利用でき設置も簡単でスマホやタブレットでも重宝しそうです。

コメントを残す




POPULAR POSTS

高機能jQueryスライダー「Slider Pro」の使い方

2016/03/03

HTML要素に背景としてYouTube動画を表示するレスポンシブ対応

2016/02/11

「HTML5」と「CSS」のみで背景動画をフルスクリーンで再生する

2016/04/09

HTML/CSSのみで動きを加えてくれるアニメーション ホバーエフェクト9選まとめ

2016/03/24

NEW ENTRY

HTMLとCSSだけ簡単シンプルなスライダーを実装

2016/08/23

マウスホバーでテキストの色を左からアニメーションで変更するCSSテクニック

2016/07/26

テキストをCSSだけで映画のタイトルのように、ぼかしたブラーの状態から徐々に表示させるテクニック

2016/07/12

画像を使わずにCSSのみでボーダーにグラデーションをかける方法

2016/07/11