簡単ステップ！ブログにおしゃれなアニメーション付きマーカーを追加する方法

/**********************************************************************
 スクロールさせたところに、おしゃれなアニメーション付きマーカーを引く
***********************************************************************/
.marker {
  background:linear-gradient(transparent 50%, rgba(255, 220, 123) 50%);
  display: inline;

  /* 背景の繰り返しを停止 */
  background-repeat: no-repeat;

  /* マーカーの横方向を0にして縮める */
  background-size: 0% 100%;

  /* マーカーが引かれる速度を指定 */
  transition:background-size 1.5s;
}

/* マーカーが引かれる際に付与するクラス */
.marker.on {
  /* 横方向を100%にして、マーカーを引く */
  background-size: 100% 100%;
}

window.addEventListener('scroll',function() {
  const height = window.innerHeight;                    //画面の高さを取得
  const scroll = this.pageYOffset;                      //スクロール量
  const marker = document.querySelectorAll('.marker');  //マーカーを引く要素を取得
  const value = scroll - height + 300                   //後ろの数字を弄ることで、イベント位置をずらす

  // markerクラスを持っている要素全てに処理を行う
  marker.forEach(function(element){
      //要素が画面内の指定の位置に来たら「on」クラスをつける
      if (scroll > element.getBoundingClientRect().top + value) {
          element.classList.add('on')
      }
  });
})

<p class="marker">おしゃれなアニメーション付きマーカーの引き方</p>
<p>マーカーを<span class="marker">この中だけアニメーションで</span>引きます。</p>