3Dで斬新なプレゼンが作れる『impress.js』の使い方をざっと説明してみるよ

SPONSORED LINK

Pocket

さて昨日からいじっているimpress.jpが良い感じです。3Dでぐりんぐりんしたプレゼンが作れるツールですよ。たとえば、ということでWeb年賀状でも作ってみましたよ(ざっくりとだけど)。

Nenga

» 百式年賀状 powered by impress.js (スペースか矢印キーでどうぞ)

なお、本家本元のデモはこちら。こちらの方がいろいろな機能を使っています。

» impress.js | presentation tool based on the power of CSS3 transforms and transitions in modern browsers | by Bartek Szopka @bartaz

ブラウザを選びますが(Chrome or Safari)、かなり良い感じです。似たようなものにPreziがありましたが、こちらはオーサリングがとんでもなく難しいので手が出せなかった人も多いはず。

一方、impress.jpは基本的にHTML+CSSなので比較的楽です。ただし、それなりに作業があるので以下、ざっと紹介してみます(HTML+CSSの知識があるのを前提に書きますよ・・・)。

■ まずはダウンロード

Githubからダウンロードします。左上の「ZIP」からでいいんじゃないかな。ざっと中身を確認していじれるところはいじっちゃいましょう(titleとか)。

» bartaz/impress.js – GitHub

■ プレゼンのアウトラインを作成

まずはアウトラインを作成します。先にやっておくと楽です。作りながら「この文字は大きく見せたい」とか想像しておきましょう。

■ stepクラスを作る

impress.jsでは「step」がついたdivが「スライド」になるので、アウトラインの数だけそのdivを作ります。以下のテンプレにあてこむといいでしょう。

なお、あとで使うので「test」クラスもつけておくと楽かと。

<div id="" class="step test" data-x="0" data-y="0" data-scale="">
    <q>こちらにアウトラインの文章を</q>
</div>

これをアウトラインの行数分作って、index.htmlに埋め込みます。

■ testクラスを作る

testクラスのCSSを作ります。これでスライドのレイアウトがしやすくなります。

.test {
  height: 700px;
  background-color: red;
}

■ 位置と大きさを決める

上記でつくったdivにはサイズと大きさを決めることができます。位置はdata-xとdata-yがそれです。一枚目はそれぞれ0にするといいでしょう。なお、data-xとdata-yは左上ではなくて、スライドの中心の座標を示すので注意です。

data-scaleは大きさで、基準となるdata-scale=1のスライドは「900px × 700px」となります。メッセージを強調したいところはdata-scale=6とかにしつつ、全体のレイアウトを作っていきます。

またdate-rotateを使うと度数で回転させることができます。こちらもうまく使いましょう。

そんなこんなで動きを想像しながらレイアウトしていくとこんな感じになります。

Im overview

↑ 最初にこういうマップを作っておくと便利です。

なお、確認する際には「/#/overview」をリロードしながらするとよろしいかと。#overviewのdivのdata-x/yは全体座標の中心にあわせておくと見やすいです。

■ 平面ができたら立体に

平面図ができたらいろいろ操作してみましょう。data-rotate-x, data-rotate-y, data-rotate-zあたりで平面軸に対して回転させたりすることができます。

またdata-zを使えばその平面から浮き上がらせること(&沈めること)も可能です。うまく使えばジェットコースターちっくなエフェクトが簡単にできちゃいますよ。

■ ちょっとしたアニメーションをつける

アニメーションをさせるには2段階でスタイルをつける必要があります。まずはアニメーションさせたい文字に以下のような指定をします。

デモではb要素につけていたりしますね。

b {
    display: inline-block;
    -webkit-transition: 0.5s;
    -moz-transition:    0.5s;
    -ms-transition:     0.5s;
    -o-transition:      0.5s;
    transition:         0.5s;
}

これでアニメーションの準備ができました。あとはそのスライドがアクティブになったときにアニメーションさせます。impress.jsではスライドがアクティブになるとstepのdivに「.active」をつけるようなので次のような書き方になります。

.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;
}

アニメーション部分のマークアップは次のようになります。

<div id="" class="step" data-x="0" data-y="0" data-scale="0" data-rotate="0">
    <q><b class="rotating">ちょいと回転</b></q>
</div>

これでアクティブになったときにちょっと文字が回転するアニメーションが出来上がります。CSS3的なアニメーションはすべて可能っぽいのでサンプルコードを参考にご自身で組み立ててみてください。

■ 動作確認、testタグの無効化

ここまで出来たら動作確認をして、testタグの中身をコメントアウトすれば出来上がりです。

他にも背景のグラデーションを変えたり、Webフォントや画像使ったり、文字単位で立体効果をつくったりすればかなり凝ったモノができそうです。

っと、以上ですかね。わりとはしょって書いちゃいましたが。というか、誰かジェネレー(ry

HTML/CSSプレゼンツールは他にもありますが、ひさびさに「使える」ツールではないでしょうかね。ご興味がある方は以下からどうぞ。

» impress.js | presentation tool based on the power of CSS3 transforms and transitions in modern browsers | by Bartek Szopka @bartaz

ツイッターもやっています!

SPONSORED LINK

  • Trackback are closed
  • Comments (0)
  1. No comments yet.