マークアップ

以下は、完全に機能するreveal.jsプレゼンテーションの基本的な例です。

<html>
  <head>
    <link rel="stylesheet" href="dist/reveal.css" />
    <link rel="stylesheet" href="dist/theme/white.css" />
  </head>
  <body>
    <div class="reveal">
      <div class="slides">
        <section>Slide 1</section>
        <section>Slide 2</section>
      </div>
    </div>
    <script src="dist/reveal.js"></script>
    <script>
      Reveal.initialize();
    </script>
  </body>
</html>

プレゼンテーションのマークアップ階層は、.reveal > .slides > section である必要があります。ここで、section要素は1つのスライドを表し、無期限に繰り返すことができます。

複数のsection要素を別のsection要素の中に配置すると、縦スライドとして表示されます。縦スライドの最初のものは（一番上の）他のものの「ルート」であり、横方向のシーケンスに含まれます。例えば

<div class="reveal">
  <div class="slides">
    <section>Horizontal Slide</section>
    <section>
      <section>Vertical Slide 1</section>
      <section>Vertical Slide 2</section>
    </section>
  </div>
</div>

横スライド

縦スライド 1

縦スライド 2

Markdownを使用してプレゼンテーションを作成することも可能です。

ビューポート

reveal.jsのビューポートは、Webページ上のプレゼンテーションのサイズを決定するラッパーDOM要素です。デフォルトでは、これはbody要素になります。同じページに複数のプレゼンテーションを含める場合、各プレゼンテーションの.reveal要素がビューポートとして機能します。

ビューポートは、reveal.jsが初期化されると常にreveal-viewportクラスで装飾されます。

スライドの状態

スライドの<section>にdata-state="make-it-pop"を設定すると、そのスライドが開かれたときにビューポート要素に「make-it-pop」がクラスとして適用されます。これにより、アクティブなスライドに基づいてページに幅広いスタイルの変更を適用できます。

<section data-state="make-it-pop"></section>

/* CSS */
.make-it-pop {
  filter: drop-shadow(0 0 10px purple);
}

JavaScriptを介してこれらの状態の変更をリッスンすることもできます。

Reveal.on('make-it-pop', () => {
  console.log('✨');
});