スライドの背景

スライドは、あらゆるディスプレイに適合し、均一に拡大縮小できるように、デフォルトでは画面の限られた部分内に含まれています。<section> 要素に data-background 属性を追加することで、スライド領域の外側にフルページの背景を適用できます。4種類の背景がサポートされています：色、画像、動画、iframe。

色の背景

16進数の値、キーワード、rgba()、hsl() など、すべての CSS カラー形式がサポートされています。

<section data-background-color="aquamarine">
  <h2>🍦</h2>
</section>
<section data-background-color="rgb(70, 70, 255)">
  <h2>🍰</h2>
</section>

🍦

🍰

グラデーションの背景

linear-gradient、radial-gradient、conic-gradient など、すべての CSS グラデーション形式がサポートされています。

<section data-background-gradient="linear-gradient(to bottom, #283b95, #17b2c3)">
  <h2>🐟</h2>
</section>
<section data-background-gradient="radial-gradient(#283b95, #17b2c3)">
  <h2>🐳</h2>
</section>

🐟

🐳

画像の背景

デフォルトでは、背景画像はフルページを覆うようにリサイズされます。利用可能なオプション

属性デフォルト
説明
data-background-image表示する画像の URL。GIFはスライドが開くと再開されます。
data-background-sizecoverMDN の background-size を参照してください。
data-background-positioncenterMDN の background-position を参照してください。
data-background-repeatno-repeatMDN の background-repeat を参照してください。
data-background-opacity10〜1のスケールで背景画像の不透明度を指定します。0は透明、1は完全に不透明です。
<section data-background-image="http://example.com/image.png">
  <h2>Image</h2>
</section>
<section data-background-image="http://example.com/image.png"
          data-background-size="100px" data-background-repeat="repeat">
  <h2>This background image will be sized to 100px and repeated</h2>
</section>

動画の背景

スライドの背面にフルサイズの動画を自動的に再生します。

属性デフォルト説明
data-background-video単一の動画ソース、または動画ソースのカンマ区切りリスト。
data-background-video-loopfalse動画を繰り返し再生するかどうかを示すフラグ。
data-background-video-mutedfalseオーディオをミュートするかどうかを示すフラグ。
data-background-sizecoverフルスクリーンで一部を切り抜くには cover を使用し、レターボックス表示にするには contain を使用します。
data-background-opacity10〜1のスケールで背景動画の不透明度を指定します。0は透明、1は完全に不透明です。
<section data-background-video="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4"
          data-background-video-loop data-background-video-muted>
  <h2>Video</h2>
</section>

動画

iframe の背景

reveal.js の幅と高さの 100% をカバーするスライド背景として Web ページを埋め込みます。iframe はスライドの背後の背景レイヤーにあるため、デフォルトでは操作できません。背景をインタラクティブにするには、data-background-interactive 属性を追加できます。

属性デフォルト説明
data-background-iframeロードする iframe の URL
data-background-interactivefalseiframe のコンテンツを操作できるようにするには、この属性を含めます。これを有効にすると、スライドコンテンツの操作ができなくなります。
<section data-background-iframe="https://slides.com"
          data-background-interactive>
  <h2>Iframe</h2>
</section>

iframe は表示されたときに遅延ロードされます。iframe を事前にロードしたい場合は、スライドの <section> に data-preload 属性を追加できます。preloadIframes 設定オプションを使用して、すべての iframe のプリロードをグローバルに有効にすることもできます。

背景のトランジション

デフォルトでは、スライドの背景間をクロスフェードでトランジションします。これは、backgroundTransition 設定オプションを使用して変更できます。

視差背景

視差スクロール背景を使用する場合は、reveal.js を初期化するときに以下の最初の 2 つのプロパティを設定します (他の 2 つはオプションです)。

Reveal.initialize({
  // Parallax background image
  parallaxBackgroundImage: '', // e.g. "https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg"

  // Parallax background size
  parallaxBackgroundSize: '', // CSS syntax, e.g. "2100px 900px" - currently only pixels are supported (don't use % or auto)

  // Number of pixels to move the parallax background per slide
  // - Calculated automatically unless specified
  // - Set to 0 to disable movement along an axis
  parallaxBackgroundHorizontal: 200,
  parallaxBackgroundVertical: 50
});

多少のスクロールができるように、背景サイズが画面サイズより大幅に大きいことを確認してください。例を見る。