HTMLプレゼンテーションフレームワーク

Hakim El Hattab と コントリビューター によって作成されました

スポンサー

こんにちは

reveal.js を使用すると、HTML を使って美しくインタラクティブなスライドデッキを作成できます。このプレゼンテーションでは、その機能の例を紹介します。

スライド

コーダーではありませんか？問題ありません。https://slides.comで、これらの作成のためのフル機能のビジュアルエディターを試してみてください。

美しいコード

                import React, { useState } from 'react';

                function Example() {
                  const [count, setCount] = useState(0);

                  return (
                    ...
                  );
                }
            

highlight.jsによるコード構文の強調表示。

さらに美しいアニメーション

                import React, { useState } from 'react';

                function Example() {
                  const [count, setCount] = useState(0);

                  return (
                    <div>
                      <p>You clicked {count} times</p>
                      <button onClick={() => setCount(count + 1)}>
                        Click me
                      </button>
                    </div>
                  );
                }

                function SecondExample() {
                  const [count, setCount] = useState(0);

                  return (
                    <div>
                      <p>You clicked {count} times</p>
                      <button onClick={() => setCount(count + 1)}>
                        Click me
                      </button>
                    </div>
                  );
                }
            

視点

スライドの概要を表示するには、ESCキーを押します。

altキー（Linuxではctrlキー）を押しながら任意の要素をクリックすると、zoom.jsを使用してその要素を拡大できます。もう一度クリックすると、ズームアウトします。

（注：Linuxではctrl + クリックを使用します。）

自動アニメーション

自動アニメーションを使用して、スライド間で一致する要素を自動的にアニメーション化します。

自動アニメーション

自動アニメーション

タッチ最適化

プレゼンテーションは、携帯電話やタブレットなどのタッチデバイスで美しく表示されます。スライドをスワイプするだけで簡単に操作できます。

テキストの自動サイズ調整には、r-fit-textクラスを追加します。

テキストサイズ調整

トランジションスタイル

次のようなさまざまなトランジションを選択できます。
なし - フェード - スライド - 凸状 - 凹状 - ズーム

背景トランジション

backgroundTransitionオプションで、さまざまな背景トランジションを使用できます。これは「ズーム」と呼ばれます。

Reveal.configure({ backgroundTransition: 'zoom' })

背景トランジション

スライドごとに背景トランジションを上書きできます。

<section data-background-transition="zoom">

素晴らしいリスト

• ここに順番はありません
• ここにもありません
• ここにもありません
• ここにもありません

素晴らしい順序付きリスト

1. 1は…より小さいです
2. 2は…より小さいです
3. 3！

表形式の表

巧妙な引用

これらは2つの形式で提供されます。インライン：標準の良い点は、選択できるものが非常に多いことですとブロック

「長年、何百万ものサルが何百万ものタイプライターでランダムにタイプすると、シェイクスピアの全作品が再現されるという理論がありました。インターネットはこの理論が間違っていることを証明しました。」

銀河系間の相互接続

スライド間を内部的にリンクできます。このように。

スピーカービュー

スピーカービューがあります。タイマー、次のスライドのプレビュー、スピーカーノートが含まれています。

試すには、Sキーを押してください。

PDFへのエクスポート

プレゼンテーションはPDFにエクスポートできます。例を次に示します。

グローバル状態

スライドにdata-state="something"を設定すると、スライドが開いているときに"something"がドキュメント要素にクラスとして追加されます。これにより、ページの背景の切り替えなど、より広範なスタイル変更を適用できます。

状態イベント

さらに、data-state名にバインドすることで、スライドごとにカスタムイベントをトリガーできます。

Reveal.on( 'customevent', function() {
  console.log( '"customevent" has fired' );
} );
            

少し休憩を

キーボードでBキーまたは.キーを押して、プレゼンテーションを一時停止します。これは、ステージにいて、気を散らすスライドを画面から外したい場合に役立ちます。

その他多数

• 右から左へのサポート
• 広範なJavaScript API
• 自動進行
• 視差背景
• カスタムキーボードバインディング

終わり

- オンラインエディターを試す
- ソースコードとドキュメント