【コピペで楽々】アニメーションで強調部分に蛍光色のラインを引くカスタマイズ

スクロール沿ってアンダーラインを引くカスタマイズを考えました。

完成予想図
コードを貼り付ける場所
貼り付けるCSS
過去に作ったカスタマイズはこちらをどうぞ

完成予想図

画面スクロールに沿って強調部分にアンダーラインを引きます。

f:id:trrun:20170307230157g:plain

下線が引かれるのは、記事を書くときに「B」で太字にした部分です。

f:id:trrun:20170307230556p:plain

コードを貼り付ける場所

パソコンとスマートフォンページ、両方とも記事→記事上（もしくは記事下）に貼り付けてください。

貼り付けるCSS

<style>
strong {
    color: #333;
    text-decoration: none;
    background: linear-gradient(rgba(255, 204, 255,0) 60%, rgba(255, 204, 255,1) 40%);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: background-size 0.3s;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(window).scroll(function(){
  var windowHeight =$(window).height();
  var windowTop =$(window).scrollTop();
  $("strong").each(function(){
    var objectImage =$(this).offset().top;
    if(windowTop > objectImage - windowHeight*3/4){$(this).css("background-size","100% 100%")};
  });
});
</script>