なかなか斬新なプレゼンを作成出来る事で
ちょっと話題になった impress.jsという
jsライブラリがあるんですが、これのjQuery
依存型があったのでご紹介します。元々
jQueryを使用しているサイトならこちら
のほうが導入が楽かもですね。
3Dなプレゼンを作成出来るライブラリ、impress.jsのjQuery版です。impress.jsに関しては以下をご参照下さい。
で、このjQuery依存型が出てきました。
jmpress.js
デモを作りたかったんですが、昨日今日は少し時間がなくて出来ませんでした。というわけで公式のデモをどうぞ。
もちろんキーボードでも操作できますし、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 ></a></div> |
コンテンツはボックス要素単位で、data属性を使って位置などを決めます。data-xはX軸、data-yはY軸、data-rotateは回転の角度ですね。
こういうの手軽に作れるって素敵ですね。ただ、あんまり長く作るとマイナス効果なので短時間でシンプルに伝えるとき以外はあんまり使わないほうが良さそうです。使いたくはなりますけどｗ
ライセンスはMITです。以下よりどうぞ。
