impress.jsでスライド作ってみた!
約30秒に1枚めくるという、プロ生勉強会のLT枠の雰囲気に思いっ切り引きずられて、もはや高橋メソッドぽくなった気がするスライド枚数です。
PowerPointほどスライドって概念があるわけではありませんが…
ひとまず作り方の大まかな解説をしようと思います。
準備
GitHubあたりからimpress.jsを落としてきます。最小限の配置はこんなかんじです。
/ └┬index.html └js/ └impress.js
CSSファイルや画像なんかもついてきますが両方ともオプションです。ヨーダはさておき、CSSがオプションだとは…
なお、上のとおり配置するといっても、最初からこの位置にimpress.jsがあるので、あんまり深く考えなくても大丈夫です。
スライドのしくみ
基本的にdivタグに特定のクラスを指定してくことでスライドを作っていきます。
<div class="fallback-message"> <!-- 動かないブラウザで見たときに表示されるメッセージ --> </div> <div id="impress"> <div class="step" data-x="0" data-y="0"> <!-- stepクラスを指定したdivタグの中が1枚のスライドに相当する data-[xyz]で座標を指定 data-rotate-[xyz]で回転の角度を設定 --> </div> </div>
だいたいこんなかんじです。画面遷移はimpress.jsにお任せすることができますが、ちょっとしたモーションはCSSで実装することになります。
スライドを作る
#overviewとすると、スライド全体を表示させることができます。厳密には指定した座標を中心に指定した倍率で表示するのですが…
この画面を表示しつつ、全体のバランスを取りながらスライドを配置していくといいかんじになると思います。
さあ、明日はうまく発表ができるといいのですが…