動きのあるマーカーハイライト

<div class="ugkTxtMarker">
  <p>WEBアニメーションはセンスが大切です。<br>ですが、<span class="js-txtMaker">センスだけで表現をすることはできません。</span></p>
  <p>まずはコーディングの知識を正しく身に着け、<br><span class="js-txtMaker">自分の手足のようにコードを操れる</span>ことが前提条件です。</p>
  <p>その為には何よりもコードを好きになり、<br>書いて書いて<span class="js-txtMaker">書き続けるしかありません。</span></p>
  <p>コーディングで<span class="js-txtMaker">あなたの未来が明るくなりますように。</span></p>
</div>

.js-txtMaker {
  position: relative;
  display: inline;
  background-image: linear-gradient(transparent 62%, rgba(255, 235, 59, 0.6) 62%);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  background-position: 0 0;
  transition: all ease 2s;
  font-weight: bold;
}
.js-txtMaker.is-on {
  background-size: 100% 100%;
}

/*テストアップのレイアウト用*/
.ugkTxtMarker p {
  line-height: 2;
  margin-top: 4em;
}

(() => {
  const run = () => {
    const els = document.querySelectorAll('.js-txtMaker');
    if (!els.length) return;

    const update = () => {
      const y = window.pageYOffset || document.documentElement.scrollTop;
      const vh = window.innerHeight || document.documentElement.clientHeight;

      els.forEach((el) => {
        //↓要素の20px下が起点（出すタイミングによって数値を変更）
        const top = el.getBoundingClientRect().top + y + 20;
        //↓画面内に入った時アニメーションを毎回発生させる場合↓
        el.classList.toggle('is-on', y >= top - vh);
        //↓アニメーションを初回のみにしたい場合↓
        //if (y >= top - vh) el.classList.add('is-on');
      });
    };

    const onChange = () => requestAnimationFrame(update);

    window.addEventListener('scroll', onChange, { passive: true });
    update();
  };

  document.readyState === 'loading'
    ? document.addEventListener('DOMContentLoaded', run)
    : run();
})();