impress.jsとはなんぞや。
Preziっぽいアニメーションを組み込んだJSライブラリです。
一回ダウンロードしてしまえば、基本的にはHTML/CSSの編集だけでそれなりのプレゼンテーションを作成できるので、
Javascriptが書けなくても全然問題ありません。
CSS3の transforms と transitions機能をフルで使いヌルヌルアニメーションを実現しています。
デメリットとしては、動作しないブラウザがあるのでその点はご注意ください。（Chrome or Safariでは動作確認済み）
下準備
・impress.jsをダウンロード
githubからダウンロードもしくはcloneしてください。
マークアップの基本
・stepクラス
impress.jsでは「step」がついたdivが「スライド」になるので、アウトラインの数だけそのdivを作ります。
・data-x=""
ページ全体に対し、配置するスライドのx座標を決めます。
・data-y=""
ページ全体に対し、配置するスライドのx座標を決めます。
・data-z=""
ページ全体に対し、配置するスライドのx座標を決めます。
・data-scale=""
スライドの大きさを決めます。
・date-rotate=""
スライドの角度を決めます。
アニメーションをつける。
以下のようにcssを作り、値を変えていくだけでアニメーションの速度やニュアンスを調節できます。
.active .rotating {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
transform: rotate(-10deg);
-webkit-transition-delay: 1.75s;
-moz-transition-delay: 1.75s;
-ms-transition-delay: 1.75s;
-o-transition-delay: 1.75s;
transition-delay: 1.75s;
}
まとめ
一番上に表示されているのが、デモを見ながら作ったものです。
大好きな「Trainspotting」の冒頭の名台詞をひたすら並べました笑
Javascript初心者の私でもかなり簡単にPreziのようなプレゼンテーションを作成できました！（というか実装ではJavascrip一切触ってない笑）
皆さんもぜひサービスの説明ページに組み込んでみたり、プレゼンテーションなどで使ってみてください！