スクロールビュー 5.0.0

reveal.js 5.0 以降、すべてのプレゼンテーションはスクロール可能なページとして表示できます。アニメーション、フラグメント、その他の機能は、通常のプレゼンテーション表示と同じように動作し続けます。

スライドデッキはプレゼンテーションを行うのに最適な形式ですが、スクロール可能なWebページは閲覧者が自分で読むのに適しています。

スクロールビューは、余分な手間をかけずに、両方の長所を兼ね備えています。プレゼンテーションに最適な形式で発表し、閲覧に最適な形式で共有します。

縦スライドはどうなる？

スクロールビューは、デッキを単一のリニアな流れに平坦化します。すべてのスライドは作成された順に表示され、水平スライドと縦スライドの区別はありません。

はじめに

スクロールビューは、reveal.jsを view: "scroll" で初期化することで有効になります。以下に、実際に動作するデモを示します。

Reveal.initialize({
  // Activate the scroll view
  view: 'scroll',

  // Force the scrollbar to remain visible
  scrollProgress: true,
});

URLによるアクティベーション

構成を変更せずにデッキのスクロールを有効にしたいですか？ URLを編集し、クエリ文字列に view=scroll を追加します。たとえば、これはスクロールビューのreveal.jsメインデモです。
https://revealjs.dokyumento.jp/demo/?view=scroll

自動アクティベーション

スクロールビューは、モバイルデバイスでプレゼンテーションを閲覧する場合に最適です。そのため、ビューポートがモバイル幅に達すると、自動的にスクロールビューを有効にします。

これは、scrollActivationWidth 設定値によって制御されます。自動スクロールビューを無効にする場合は、その値を null または 0 に設定してプレゼンテーションを初期化してください。

Reveal.initialize({
  scrollActivationWidth: null,
});

スクロールバー

スクロールビューのプレゼンテーションには、カスタムのスクロールバーが表示されます。このスクロールバーはスライドごとに分割されており、ユーザーはスライドがいつ切り替わるかを明確に把握できます。

スクロールバーには、スライド内の個々のフラグメントも表示されます。フラグメントがあるスライドには、フラグメントの数に基づいて、より多くの垂直スペースが与えられます。

デフォルトでは、スクロールを停止すると、スクロールバーは自動的に非表示になります。この動作は、scrollProgress を使用して設定できます。

// - auto:     Show the scrollbar while scrolling, hide while idle
// - true:     Always show the scrollbar
// - false:    Never show the scrollbar
scrollProgress: 'auto';

スクロールスナップ

スクロールすると、reveal.jsは自動的に最も近いスライドにスナップします。これは、タッチデバイスでスライド間を「フリック」するのが非常に快適であるため、デフォルトの動作として選択されました。

必要に応じて、proximity を使用してスライドの上部に近い場合にのみスナップするように変更できます。scrollSnap を false に設定して、スナップを完全に無効にすることもできます。

// - false:      No snapping, scrolling is continuous
// - proximity:  Snap when close to a slide
// - mandatory:  Always snap to the closest slide
scrollSnap: 'mandatory';

スクロールレイアウト（実験的）

デフォルトでは、各スライドはビューポートと同じ高さになるようにサイズが設定されます。これはほとんどの場合に最適に見えますが、スライドの上または下に少し空白スペースができる可能性があります（ビューポートとスライドデッキのアスペクト比によって異なります）。

複数のスライドが並んで表示される、より高密度のレイアウトを優先する場合は、scrollLayout オプションを compact に設定します。これにより、各スライドはビューポートと同じ幅になり、アスペクト比（スライド幅/高さ）に一致するように必要な高さになります。

以下の例で、2つのモードの違いを確認できます。コンパクトレイアウトから始めます。

Reveal.initialize({
  view: 'scroll'
  scrollLayout: 'compact'
});

同じコンテンツで、scrollLayout をデフォルト（'full'）に設定した場合。

Reveal.initialize({
  view: 'scroll'
  scrollLayout: 'full' // this is the default value
});

例

スクロール可能なreveal.jsデッキの例を探している場合は、こちらをご覧ください: https://slides.com/news/scroll-mode/scroll