Chrome Life

Chrome OS, Chrome Web Store などChrome関連の話題、Google+などの新しいGoogleサービス、HTML5, JavaScript, CSS3によるWebアプリ開発、ChromeBook、MacBook Air、クラウドの活用方法などを紹介

いろんな用途で使える!柔軟性の高いHTML5プレゼンテーションライブラリー「Presenteer.js」

最近では、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」

【おすすめのオンライン画像加工アプリ】 HTML5Canvasを使った実用的なグラフィックツールをまとめました。こちらもあわせてチェックしてみてください。 HTML5で作られた驚異のフォトエディターまとめ

HTML5ベースのWYSIWYGエディタ】 HTML5の技術とプログレッシブエンハンスメントのアプローチに基づいたオープンソースのリッチテキストエディタを見つけました。こちらもあわせてチェックしてみてください。 HTML5のWYSIWYGエディタ「wysihtml5」がシンプルで扱いやすい!jQuery不要

それでは、また!