Chrome Life

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

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

いろんな用途で使える!柔軟性の高い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」

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

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

それでは、また!

jQuery・JavaScriptをもっとマスターしたい方にオススメの書籍

タグ: , , ,

新着記事

この記事の読者におすすめの記事

このブログを購読しませんか?

RSSリーダーを使うと、このブログの更新情報がすぐに入手できるようになります。
このブログのRSSをRSSリーダーに登録すれば、更新されるたびに記事の本文を読むことができます。

Twitterでもこのブログの更新情報や筆者が見つけた情報をつぶやいていますので、@opakenをフォローしていただけるとうれしいです。

Facebookのファンページも用意しています。こちらでも更新情報を配信しています。「いいね!」をクリックしてもらうだけで購読できます。