[JS]ぷるぷるとかわいいアニメーションでモーダルボックスを表示させるスクリプト -Stackbox
Post on:2014年7月4日
sponsors
ぷるぷるとかわいいアニメーションでモーダルボックスを表示させるjQueryのプラグインを紹介します。
ぷるぷるだけでなく、ぶらーんとさせたり、しゃかしゃかさせたり、ぺらっとさせたり、さまざまなものが揃っていて楽しいアニメーションが満載です。
Stackboxのデモ
デモはメインページだけでなく、デモページもたくさん用意されています。
animationsでは、左下のプルダウンからさまざまなアニメーションが楽しめます。開閉時にそれぞれ60種類くらいとスピードが変更できます。
↑は、ぷらーんとさせるアニメーション。
モーダルボックスのデザインはCSS/LESSで簡単にカスタマイズできます。
YouTubeの動画もさまざまなアニメーションで表示できます。
Stackboxの使い方
Step 1: 外部ファイル
当スタイルシート・スクリプトとjqury.jsを外部ファイルとして記述します。
<head> ... <link rel="stylesheet" href="../build/css/stackbox-docs.min.css"> </head> <body> ... <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="../build/js/stackbox-docs.min.js"></script> </body>
Step 2: HTML
まずは、モーダルボックスのHTML。
コンテンツは通常通り自由に配置でき、「display:none;」で非表示にしておきます。
<div id="some-element" style="display: none;"> <div class="stackbox-body">Stackbox example with options</div> </div>
モーダルボックスを表示するトリガーは、HTML5のdata属性を使用します。
<a href="#some-element" data-stackbox="true" data-stackbox-close-button="true" data-stackbox-position="bottom" data-stackbox-anim-open="tada slow">Open Stackbox</a>
Step 3: HTML5が使用できない場合（JavaScript）
上記のHTML5のdata属性の代わりに、スクリプトで指定することもできます。
jQueryのセレクタでモーダルボックスを指定し、アニメーションやボタンの有無、配置などを設定します。
$('#some-element').stackbox({
closeButton: true,
position: 'bottom',
animOpen: 'tada slow'
});
sponsors
