Skip to content

CSS3で3Dでビュンビュン飛ぶスライドが簡単に作れちゃうハックshi3mpress

gl.enchant.jsの登場など、Webでも3Dが流行の兆し!?

さてさて、そんな中、impress.jsというオープンソースのプレゼンテーションソフトが登場した。

これがすごいのは、WebGLではなくCSS3で全て処理しているところ。
わずか300行くらいのコードでこれだけビュンビュン動くのだ。

しかし、ただひとつ残念なのは、これにあわせたプレゼンを書くのに、タグを直接打たなきゃいけないこと。
簡単な内容ならともかく、タグの直打ちはけっこう大変で面倒くさい。

そこで、KeynoteやPowerPointのスライドを簡単にimpress.jsに変換してしまうphpを用意して、連番PNGをフォルダに置くだけで動くようにしてみたぞ。

実際の3Dプレゼンテーションはこちら

開発時間は約4時間。ちょうど今日、UEIの就活ハッカソンがあったのでその空き時間に作ってみた。
若干セットアップが面倒(自分のPCにPHPが使えるWebサーバーをセットアップしたりとか)なんだけど、効果は一目瞭然。

さらに、ファイル名に仕掛けをして、ファイル名に「_big」が含まれている場合は大きなスライドとしてまとめることにしたぞ。
「_big」があるものは、最後のページで一覧することができる。

時間が余ったので、他にもYoutubeを埋め込んだり、9leapのゲームを埋め込んだり、拡張子を弄るだけでいろんなことができるようにしてみた。

これでスライドを作ってライバルに差をつけろ!

ここからダウンロード↓
http://junk.wise9.jp/shi3mpress/shi3mpress.zip

このエントリーをはてなブックマークに追加
はてなブックマーク - CSS3で3Dでビュンビュン飛ぶスライドが簡単に作れちゃうハックshi3mpress
Post to Google Buzz
Share on GREE

No related posts.

Facebook comments:

Post a Comment

Your email is never published nor shared. Required fields are marked *
*
*