フラグメント

フラグメントは、スライド上の個々の要素を強調表示したり、段階的に表示したりするために使用されます。fragmentクラスを持つすべての要素は、次のスライドに進む前に順番に処理されます。

デフォルトのフラグメントスタイルは、最初は非表示でフェードインすることです。このスタイルは、フラグメントに別のクラスを追加することで変更できます。

<p class="fragment">Fade in</p>
<p class="fragment fade-out">Fade out</p>
<p class="fragment highlight-red">Highlight red</p>
<p class="fragment fade-in-then-out">Fade in, then out</p>
<p class="fragment fade-up">Slide up while fading in</p>

カスタムフラグメント 4.5.0

カスタム効果は、それぞれ.fragment.effectnameと.fragment.effectname.visibleのCSSスタイルを定義することで実装できます。visibleクラスは、プレゼンテーションで段階的に処理されるときに各フラグメントに追加されます。

たとえば、以下は、要素が最初はぼやけていて、段階的に処理されるときにフォーカスされるフラグメントスタイルを定義しています。

<style>
  .fragment.blur {
    filter: blur(5px);
  }
  .fragment.blur.visible {
    filter: none;
  }
</style>
<section>
  <p class="fragment custom blur">One</p>
  <p class="fragment custom blur">Two</p>
  <p class="fragment custom blur">Three</p>
</section>

各フラグメントにcustomクラスを追加していることに注意してください。これは、reveal.jsがデフォルトのフェードインフラグメントスタイルを適用しないように指示します。

現在のフラグメントを除くすべての要素をぼやけたままにする場合は、visibleをcurrent-fragmentに置き換えることができます。

.fragment.blur.current-fragment {
  filter: none;
}

ネストされたフラグメント

複数のフラグメントを同じ要素に順番に適用するには、要素をラップします。これにより、最初のステップでテキストがフェードインし、2番目のステップで赤くなり、3番目のステップでフェードアウトします。

<span class="fragment fade-in">
  <span class="fragment highlight-red">
    <span class="fragment fade-out"> Fade in > Turn red > Fade out </span>
  </span>
</span>

フラグメントの順序

デフォルトでは、フラグメントはDOMに表示される順序で処理されます。この表示順序は、data-fragment-index属性を使用して変更できます。複数の要素が同じインデックスに表示されることに注意してください。

<p class="fragment" data-fragment-index="3">Appears last</p>
<p class="fragment" data-fragment-index="1">Appears first</p>
<p class="fragment" data-fragment-index="2">Appears second</p>

イベント

フラグメントが表示または非表示になると、reveal.jsはイベントをディスパッチします。

Reveal.on('fragmentshown', (event) => {
  // event.fragment = the fragment DOM element
});
Reveal.on('fragmenthidden', (event) => {
  // event.fragment = the fragment DOM element
});