【完全版】IntersectionObserver×CSSアニメで実現！スクロール時に動く“下線アニメーション”の実装術

<h2 class="scroll-underline">見出しタイトル</h2>

.scroll-underline {
  display: inline-block;
  position: relative;
  font-weight: bold;
  overflow: hidden;
}

.scroll-underline::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #007bff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease-out;
}

.scroll-underline.is-visible::after {
  transform: scaleX(1);
}

document.addEventListener('DOMContentLoaded', () => {
  const elements = document.querySelectorAll('.scroll-underline');

  const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('is-visible');
        observer.unobserve(entry.target); // 一度だけ表示でOKなら
      }
    });
  }, {
    threshold: 0.5 // 要素の50%が表示されたら発火
  });

  elements.forEach(el => observer.observe(el));
});

.scroll-underline:nth-child(1)::after { transition-delay: 0.1s; }
.scroll-underline:nth-child(2)::after { transition-delay: 0.2s; }
.scroll-underline:nth-child(3)::after { transition-delay: 0.3s; }

.scroll-underline.type-primary::after { background: #007bff; height: 3px; }
.scroll-underline.type-warning::after { background: #ffc107; height: 2px; }
.scroll-underline.type-danger::after  { background: #dc3545; height: 4px; }