[JS]ぷるぷるとかわいいアニメーションでモーダルボックスを表示させるスクリプト -Stackbox

ぷるぷるとかわいいアニメーションでモーダルボックスを表示させるjQueryのプラグインを紹介します。

ぷるぷるだけでなく、ぶらーんとさせたり、しゃかしゃかさせたり、ぺらっとさせたり、さまざまなものが揃っていて楽しいアニメーションが満載です。

デモのアニメーション

Stackbox
Stackbox -GitHub

Stackboxのデモ

デモはメインページだけでなく、デモページもたくさん用意されています。

デモのキャプチャ

Stackbox

デモのアニメーション

demo: animations

animationsでは、左下のプルダウンからさまざまなアニメーションが楽しめます。開閉時にそれぞれ60種類くらいとスピードが変更できます。
↑は、ぷらーんとさせるアニメーション。

デモのキャプチャ

demo: style

モーダルボックスのデザインはCSS/LESSで簡単にカスタマイズできます。

デモのキャプチャ

demo: video

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

top of page

©2018 coliss