最近では、HTML5製のプレゼンテーションツールも増えてきました。
筆者は、先日Node.jsの勉強会で「reveal.js」を使ったのですが、動きもカッコよくて簡単にスライドが作れてなかなかよかったです。
しかし、こういったプレゼンツールは画面全体がスライドになってしまうので、サイトの一部や記事の中に埋め込むといった用途にはむいていません。
そこで今回ご紹介するのが、どこにでも埋め込んで使える柔軟性の高いHTML5プレゼンテーションライブラリー「Presenteer.js」です。
「Presenteer.js」にアクセスすると、デモが確認できます。
ページの中にプレゼンテーションエリアが用意されていて、クリックするとスライドがアニメーションで切り替わるようになっています。
仕組みも簡単で、プレゼン用の DIVを用意しておいて、JavaScriptで指定するだけです。
var presentation = new Presenteer("#presentation", $("#presentation > div"));
今流行りの回転をかけたエフェクトもCSS3で指定するだけでバッチリ動いてくれます。
「Presenteer.js」は、jQueryベースのシンプルで使いやすいライブラリーなので、いろんな用途に使えそうですねw
是非、試してみてください。
【マウスで銀はがしを体験できるプラグイン】 こちらはユニークはjQueryプラインです。用途としては、ブラウザ上で簡単なスクラッチくじを実現したい場合や、宝探しゲームのようなものや、レア画像を削って見せていくなどに使えそうですよw スクラッチ宝くじのような削ると見えてくるjQueryプラグイン「wScratchPad」
【おすすめのオンライン画像加工アプリ】 HTML5のCanvasを使った実用的なグラフィックツールをまとめました。こちらもあわせてチェックしてみてください。 HTML5で作られた驚異のフォトエディターまとめ
【HTML5ベースのWYSIWYGエディタ】 HTML5の技術とプログレッシブエンハンスメントのアプローチに基づいたオープンソースのリッチテキストエディタを見つけました。こちらもあわせてチェックしてみてください。 HTML5のWYSIWYGエディタ「wysihtml5」がシンプルで扱いやすい！jQuery不要
それでは、また！