How can I make the first fragment (highlighted) automatically visible in reveal.js?

Question

In reveal.js, is it possible to make the first fragment automatically visible?

I'm hooking into the text colour highlight capability to apply a slightly brighter colour to the most recent fragment made visible, in order to focus attention on that fragment. The text reverts to normal colour when the next fragment is made visible.

If I make the first line of text a non-fragment, it appears straight away, but in the regular text colour. If I make it a fragment, I've got to advance once to make the first line appear (which is a reasonable fallback, just not my preference). The highlight colour does work when it's a fragment though.

This is some example markup:

    <section>
      <h2>Highlight First Line Test</h2>
      <p class="fragment highlight-current">Want this line visible <i>and</i> colour highlighted on slide entry</p>
      <p class="fragment highlight-current">Appears 2nd with colour highlight</p>
    </section>

And the CSS override I've used to hook into the reveal.js highlight function:

    .reveal .slides section .fragment.highlight-current.current-fragment {
      color: #f00; 
    }

(I've looked at autoslide as well but can't make it do what I want).

Bookmaker

Answer 1

By using a modification of the fade-out styling you can have the first line as a fragment that is visible to begin with and a different colour when no longer current.

<style>
    .reveal .slides section .fragment.fade-down {
        opacity: 1;
        visibility: visible;
    }
    .reveal .slides section .fragment.fade-down.visible,
    .reveal .slides section .fragment.visible:not(.current-fragment) {
        color: grey;
    }
    .reveal .slides section .fragment.fade-down,
    .reveal .slides section .fragment.current-fragment {
        color: #1b91ff;
    }
</style>

<section>
  <h2 class="fragment fade-down" data-fragment-index="0">Highlight First Line Test</h2>
  <p class="fragment" data-fragment-index="0">Want this line visible <i>and</i> colour highlighted on slide entry</p>
  <p class="fragment">Appears 2nd with colour highlight</p>
</section>

Make sure you set data-fragment-index="0" for both the first and second fragments so that the second fragment is shown when the first fades down.

Cogitation

Answer 2

Old question, but I think I have come up with a better solution to this, which is more general and CSS only.

/* Select only the first fragment and undo the hiding styling RevealJS */
/* applies by default */
.reveal .slides section .fragment:first-child {
  /* (what you do in here depends on the fragment animations you have applied) */
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0);
}

/* Select the first child only if any subsequent child has the */
/* .current-fragment class (i.e. when the 1st fragment is not the */
/* currently selected one) */
.reveal .slides section .fragment:first-child:has(~ .current-fragment) {
  /* (what you do in here depends on the fragment animations you have applied) */
  opacity: 0.5;
}

Gopak