<main class="main">
  <section id="a" class="section" aria-hidden="true">
    <h2><span>Section A</span></h2>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing, elit. Quas soluta sequi voluptatum sit at sed tenetur blanditiis incidunt, voluptas explicabo. Earum amet corrupti culpa accusantium. Eaque sunt eveniet unde. Hic perspiciatis quibusdam accusantium aspernatur, a molestias deleniti fuga provident dolorem aliquam placeat dolores at odit nihil, reprehenderit neque voluptatum in odio, saepe dolorum mollitia natus consectetur cum harum. Reiciendis architecto maiores quos excepturi minima aliquam libero, veniam ullam, soluta, maxime dignissimos, ab magnam. Maxime totam iure impedit corporis ad reiciendis.</p>
  </section>
  
  <section id="b" class="section" aria-hidden="true">
    <h2><span>Section B</span></h2>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing, elit. Quas soluta sequi voluptatum sit at sed tenetur blanditiis incidunt, voluptas explicabo. Earum amet corrupti culpa accusantium. Eaque sunt eveniet unde. Hic perspiciatis quibusdam accusantium aspernatur, a molestias deleniti fuga provident dolorem aliquam placeat dolores at odit nihil, reprehenderit neque voluptatum in odio, saepe dolorum mollitia natus consectetur cum harum. Reiciendis architecto maiores quos excepturi minima aliquam libero, veniam ullam, soluta, maxime dignissimos, ab magnam. Maxime totam iure impedit corporis ad reiciendis.</p>
  </section>

  <section id="c" class="section" aria-hidden="true">
    <h2><span>Section C</span></h2>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing, elit. Quas soluta sequi voluptatum sit at sed tenetur blanditiis incidunt, voluptas explicabo. Earum amet corrupti culpa accusantium. Eaque sunt eveniet unde. Hic perspiciatis quibusdam accusantium aspernatur, a molestias deleniti fuga provident dolorem aliquam placeat dolores at odit nihil, reprehenderit neque voluptatum in odio, saepe dolorum mollitia natus consectetur cum harum. Reiciendis architecto maiores quos excepturi minima aliquam libero, veniam ullam, soluta, maxime dignissimos, ab magnam. Maxime totam iure impedit corporis ad reiciendis.</p>
  </section>
  
  <section id="d" class="section" aria-hidden="true">
    <h2><span>Section D</span></h2>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing, elit. Quas soluta sequi voluptatum sit at sed tenetur blanditiis incidunt, voluptas explicabo. Earum amet corrupti culpa accusantium. Eaque sunt eveniet unde. Hic perspiciatis quibusdam accusantium aspernatur, a molestias deleniti fuga provident dolorem aliquam placeat dolores at odit nihil, reprehenderit neque voluptatum in odio, saepe dolorum mollitia natus consectetur cum harum. Reiciendis architecto maiores quos excepturi minima aliquam libero, veniam ullam, soluta, maxime dignissimos, ab magnam. Maxime totam iure impedit corporis ad reiciendis.</p>
  </section>

  <section id="e" class="section" aria-hidden="true">
    <h2><span>Section E</span></h2>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing, elit. Quas soluta sequi voluptatum sit at sed tenetur blanditiis incidunt, voluptas explicabo. Earum amet corrupti culpa accusantium. Eaque sunt eveniet unde. Hic perspiciatis quibusdam accusantium aspernatur, a molestias deleniti fuga provident dolorem aliquam placeat dolores at odit nihil, reprehenderit neque voluptatum in odio, saepe dolorum mollitia natus consectetur cum harum. Reiciendis architecto maiores quos excepturi minima aliquam libero, veniam ullam, soluta, maxime dignissimos, ab magnam. Maxime totam iure impedit corporis ad reiciendis.</p>
  </section>
</main>
<aside class="indicator">
  <dl>
    <dt>A</dt><dd id="data-a"></dd>
    <dt>B</dt><dd id="data-b"></dd>
    <dt>C</dt><dd id="data-c"></dd>
    <dt>D</dt><dd id="data-d"></dd>
    <dt>E</dt><dd id="data-e"></dd>
  </dl>
</aside>

body {
  background-color: #333;
  color: #fff;
  font-family: "Teko", sans-serif;
}
.main {
  width: 100%;
  overflow: hidden;
}
.section {
  & {
    padding: 2rem 1rem;
  }
  h2 {
    span {
      display: inline-block;
    }
  }
  &:first-child {
    background-color: navy;
  }
  &:nth-child(2) {
    background-color: #1f9b7c;
  }
  &:nth-child(5) {
    background-color: #bc2765
  }
}

.indicator {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 100;
  height: auto;
  padding: 1rem;
  border-radius: 4px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  background: rgba(0, 0, 0, 0.8);

  dl {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 8rem;
    margin: 0;
  }
  dt {
    flex: 0 0 auto;
    width: 1em;
    margin: 0;
    font-weight: bold;
    font-size: 0.75rem;
    line-height: calc(1em + 0.25rem);
  }
  dd {
    flex: 0 0 auto;
    width: 6.5rem;
    margin: 0;
    font-size: 0.75rem;
    line-height: calc(1em + 0.25rem)
  }
}

h2 {
  margin: 0 0 1rem;
  font-weight: bold;
  font-size: 1.625rem;
  line-height: calc(1em + 0.5rem);
}
p {
  font-size: 1rem;
  line-height: 2;
}

const options = {
  root: null,
  rootMargin: "0px",
  threshold: buildThresholdList(100) // [0.00, 0.01, 0.02, 0.03, ..., 0.99, 1.00]
};

const callback = (entries, observer) => {
  entries.forEach((entry) => {
    // インジケーター
    document.getElementById("data-" + entry.target.id).innerHTML = `
    ${entry.isIntersecting}<br>
    可視領域: ${Math.ceil(entry.intersectionRatio * 100)}% `;

    // Section A（透明度）
    if (entry.target.id === "a") {
      entry.target.style.opacity = entry.intersectionRatio;
    }
    // Section B（子要素のblur）
    if (entry.target.id === "b") {
      Array.from(entry.target.children).forEach((e, i) => {
        e.style.filter = `blur(${(1 - entry.intersectionRatio) * 10}px)`;
      });
    }
    // Section C（背景色HSL）
    if (entry.target.id === "c") {
      entry.target.style.backgroundColor = `hsl(${
        entry.intersectionRatio * 360
      }, 100%, 50%)`;
    }
    // Section D（回転）
    if (entry.target.id === "d") {
      entry.target.querySelector("h2 span").style.transform = `rotate(${
        (1 - entry.intersectionRatio) * 720
      }deg)`;
    }
    // Section E（見出しX座標）
    if (entry.target.id === "e") {
      entry.target.querySelector("h2 span").style.transform = `translateX(${
        entry.intersectionRatio * 200
      }%)`;
    }
  });
};

const observers = [];
const sections = document.querySelectorAll(".section");
sections.forEach((e, i) => {
  observers[i] = new IntersectionObserver(callback, options);
  observers[i].observe(e);
});

function buildThresholdList(num) {
  let thresholds = [];
  let numSteps = num || 20;
  console.log(numSteps);
  for (let i = 1.0; i <= numSteps; i++) {
    let ratio = i / numSteps;
    thresholds.push(ratio);
  }

  thresholds.push(0);
  return thresholds;
}