文中に動くアンダーラインを追加

長文のテキストを読ませたいときには、所々さりげない強調や動きをつけてはどうでしょう。
今日はそんなときに使える、文中に動くアンダーラインを追加する方法をご紹介します。
スクロールにあわせて発火します。

サンプル

テキストテキストテキストテキストテキストここだけ強調したいテキストです。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。

テキストテキストテキストテキストテキストテキストテキストテキストここだけ強調したいテキストです。ここだけ強調したいテキストです。改行にも対応してます。テキストテキストテキストテキスト。

HTML

<p>
テキストテキストテキストテキストテキスト
<span class="outline-text scroll-anime">ここだけ強調したいテキストです。</span>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。<br>
<br>
テキストテキストテキストテキストテキストテキストテキストテキストここだけ強調したいテキストです。
<span class="outline-text scroll-anime">ここだけ強調したいテキストです。改行にも対応してます。</span>
テキストテキストテキストテキスト。
</p>

CSS

.outline-text {
  background-image: linear-gradient(rgb(250 231 163), rgb(250 231 163));
  background-repeat: no-repeat;
  background-position: left 90%;
  background-size: 0% 0.6em;
  mix-blend-mode: multiply;
  transition: background-size 2s linear;
  font-weight: 600;
}

.outline-text.active {
  background-size: 100% 9px;
}

JS

以下のJSを追加（.scroll-anime要素が画面に入ったら.active追加）

jQuery(function ($) {
  $(window).on("scroll", function () {
    $(".scroll-anime").each(function () {
      let rect = this.getBoundingClientRect();
      let windowHeight = window.innerHeight;

      if (rect.top < windowHeight && rect.bottom > 0) {
        $(this).addClass("active");
      }
    });
  });
});

簡単にいい感じになりました！
transitionを使っているだけなので、キーフレームも不要です✨️
お役に立てれば幸いです。