省スペースで印象的なプレゼンができる・Presenteer.js

省スペースで印象的なプレゼンを行える
jQueryのプラグインです。ちょっと見た
事のないタイプだったのでご紹介してみ
ました。用途はかなり限られそうですが、
印象的ではありますね。省スペースで
ある必要は無いかもですがｗ

面白かったのでご紹介。限られたスペース内で印象的なプレゼンを可能とする、みたいな目的で作ったみたいです。（多分

Presenteer.js

このように、ボックス内をクリックして進めていく、みたいなやつ。場所を取らずに印象的なプレゼンを可能としています。

以下サンプルを用意しました。Chromeとかでご覧下さいませ。

Sample

時間無くてCSS3の部分だけ調整してません。

コード

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script src="js/presenteer-1.0.js"></script>

本体とプラグインを読み込みます。

$(window).load(function() {
	var presentation1 = new Presenteer("#presentation1", 
		$("#presentation1 > div"), { 
			centerHorizontally : false, 
			centerVertically: true, 
			followElementTransforms: true });

	$("#presentationcontainer1").on("click", function() { presentation1.next(); });
	presentation1.start();
});

あとは上記のようにセレクタを指定してセッティングする。

<div class="presentationcontainer" id="presentationcontainer1">
<div class="presentation" id="presentation1">
<div>クリックでスタートします。</div>
<div>Presenteer.jsはこのように省スペースでプレゼンするためのライブラリです。</div>
<div>HTML5とjQueryを使用します。<br />ですのでブラウザによっては使用できません。</div>
<div>用途は限られそうですが、珍しいのでご紹介しました。</div>
<div class="trans">こんな感じでCSS3を併用する時は別途他のライブラリが必要です。</div>
<div>利用方法は下記をご参照下さい。</div>
</div></div>

資料はdiv単位で進んでいきます。

あとはCSSでちょいちょい調整すれば完成です。

用途は相当限られそうですけど、見たことの無いタイプだったのでメモしておきました。ご利用は以下よりどうぞ。

Presenteer.js