プレゼンフレームワーク reveal.js にやっつけ chapter 機能をつける ref: https://qiita.com/unau/items/b133c62a3f0867c0efa4

chapter.css

header {
  clear: both;

  position: absolute;
  top: 5px;
  left: 5px;

  z-index: 20;
}

header div {
  text-align: center;

  color: #fff;

  transition: all 300ms 0s ease-in;

  font-family: "Source Sans Pro", Helvetica, sans-serif;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: uppercase;
  text-shadow: none;

  word-wrap: break-word;

  display: block;

  font-size: 0em;
}

header div.shown {
  font-size: 2.5em;

  margin: 0 auto;
  padding: 10px;

  box-shadow: 1px 2px 3px #000;
  border-radius: 15px;
  background-color: rgba(0, 255, 0, 0.3);
}

chapter.js

const Chapterion = {
  current: {
    c: 0
  },
  chapters: [],
};

Chapterion.Chapter = function(section, idx, elm) {
  this.section = section;
  section.dataset.chapterIndex = idx;
  this.elm = elm;
  elm.dataset.chapterIndex = idx;
  this.index = idx;
  let text = section.dataset.chapter;
  if (text) {
    elm.innerHTML = text;
    this.activity = true;
  } else {
    this.activity = false;
  }
};

Chapterion.init = function() {
  const self = this;
  const header = document.querySelector("header");

  document.querySelectorAll("div.reveal section").forEach(function(section, i) \
{
    let elm = document.createElement("div");
    self.chapters.push(new Chapterion.Chapter(section, i, elm));
    header.appendChild(elm);
  });
};

Chapterion.flip = function(event) {
  let newChapterIndex = event.currentSlide.dataset.chapterIndex;
  if (! newChapterIndex) {
    newChapterIndex = event.currentSlide.offsetParent.dataset.chapterIndex;
  }
  if (newChapterIndex == this.current.c) return;
  this.chapters.forEach(function(chapter) {
    const section = chapter.section;
    if (chapter.activity && chapter.index == newChapterIndex) {
      console.log('ADD', newChapterIndex, chapter.index);
      chapter.elm.classList.add('shown');
    } else {
      console.log('REM', newChapterIndex, chapter.index);
      chapter.elm.classList.remove('shown');
    }
  });
  this.current.c = newChapterIndex;
};

index.html

 <script src="js/reveal.js"></script>
  <script src="js/echi5c.js"></script>

  <script>
   // More info about config & dependencies:
   // - https://github.com/hakimel/reveal.js#configuration
   // - https://github.com/hakimel/reveal.js#dependencies
   Reveal.initialize({
    dependencies: [
     { src: 'plugin/markdown/marked.js' },
     { src: 'plugin/markdown/markdown.js' },
     { src: 'plugin/notes/notes.js', async: true },
     { src: 'plugin/zoom-js/zoom.js', async: true },
    ],
    parallaxBackgroundImage: "mugi.jpg",
    parallaxBackgroundHorizontal: 220,
    parallaxBackgroundVertical: 100
   });

   Chapterion.init();

   Reveal.addEventListener('slidechanged', function(event) {
     Chapterion.flip(event);
   });
  </script>