• かちびと.net

    impress.jsライクなダイナミックなプレゼンテーションを作成するjQuery依存タイプのライブラリ・jmpress.jsのご紹介。HTMlタイプのプレゼンも増えてきましたねー。

    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

impress.jsライクなダイナミックなプレゼンテーションを作成するjQuery依存タイプのライブラリ・jmpress.js

スポンサーリンク

なかなか斬新なプレゼンを作成出来る事で
ちょっと話題になった impress.jsという
jsライブラリがあるんですが、これのjQuery
依存型があったのでご紹介します。元々
jQueryを使用しているサイトならこちら
のほうが導入が楽かもですね。

3Dなプレゼンを作成出来るライブラリ、impress.jsのjQuery版です。impress.jsに関しては以下をご参照下さい。

3Dで斬新なプレゼンが作れる『impress.js』の使い方をざっと説明してみるよ

で、このjQuery依存型が出てきました。

jmpress.js


デモを作りたかったんですが、昨日今日は少し時間がなくて出来ませんでした。というわけで公式のデモをどうぞ。

Sample

もちろんキーボードでも操作できますし、impress.js同様にハッシュチェンジイベント対応済みです。

コード

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jmpress.js"></script>
<script type="text/javascript">
$(function() {
	$('#jmpress').jmpress({
		beforeChange: function( slide ) {
			var id = slide.attr('id');
			if (id.indexOf('-') != -1) {
				id = id.substr(0, id.indexOf('-'));
			}
			$('#nav a').removeClass( 'active' );
			$('#nav a[href=#' + id + ']').addClass( 'active' );
		}
	});
	$('.next').click(function() {
		$('#jmpress').jmpress('next');
		return false;
	});
});
</script>

ナビゲーション等のセレクタは便宜変更してください。

	<div id="about-port" class="step" data-x="-950" data-y="-1000" data-rotate="20">
		<h4>sample</h4>
		<p>text</p>
		<a href="#" class="next">next &gt;</a>
	</div>

コンテンツはボックス要素単位で、data属性を使って位置などを決めます。data-xはX軸、data-yはY軸、data-rotateは回転の角度ですね。

こういうの手軽に作れるって素敵ですね。ただ、あんまり長く作るとマイナス効果なので短時間でシンプルに伝えるとき以外はあんまり使わないほうが良さそうです。使いたくはなりますけどw

ライセンスはMITです。以下よりどうぞ。

jmpress.js

URL :
TRB :

Comments & Trackbacks (1)

Twitter

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

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

twitter facebook rss contact

Ads

Posts

Contact

Services