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

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

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

Presenteer.js

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

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

Sample

クリックでスタートします。

Presenteer.jsはこのように省スペースでプレゼンするためのライブラリです。

HTML5とjQueryを使用します。
ですのでブラウザによっては使用できません。

用途は限られそうですが、珍しいのでご紹介しました。

こんな感じでCSS3を併用する時は別途他のライブラリが必要です。

利用方法は下記をご参照下さい。

時間無くて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>