こんにちは。今回はjQeryプラグイン「jmpress.js」を紹介します。 このjmpress.jsはimpress.jsのjQuery版で、ウェブページを一枚のキャンバスに見立て、様々なアニメーションを展開してコンテンツを表示します。まずはデモページを見ていただいたほうがはやいと思います。

http://jmpressjs.github.com/jmpress.js/#/home

※矢印キーまたはスペースで操作します。

まさにアニメーションがPreziのようです。というのも、実際にこのプラグイン制作者はPreziにinspireを受けて制作したからだそうです。私も試しに作ってみました。（デモを多少改良しただけですが。）

http://demo006.hotcom-web.com/#/step-1

目が回って気持ち悪くなった方申し訳ありません。

コンテンツをボックス要素で囲み、位置情報をdata属性で指定してやれば動くので、思ったよりシンプルな構造でした。また、アニメーションのオプションが豊富にあって多様な動きが実現出来ます。ただ、アニメーションや角度をつけてぐるんぐるん回転させすぎると目が回るので注意。

使い方とオプションの詳細はこちらに書いてあります。

jmpress.js documentation

また「jmpress.js」と組み合わせて、「Slideshow with jmpress.js」というスライドショーを表示することができるjQueryもありました。

 プレゼンテーションツールとして紹介されているところが多いですが、webサイトに使ってみると面白そうです。

今度、「jmpress.js」を使ってwebサイトを制作してみます。ではまた。