• かちびと.net

    省スペースで印象的なプレゼンができる・Presenteer.jsのご紹介。ユニークだったので備忘録。小さなスペースでプレゼンを可能とします。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

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

スポンサーリンク

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

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

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>

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

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

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

Presenteer.js

URL :
TRB :

Comments & Trackbacks (1)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services