<div>
  スクロール<br>
  ↓ ↓ ↓ ↓ ↓ ↓ ↓
</div>
<div>
  スクロール<br>
  ↓ ↓ ↓ ↓ ↓ ↓ ↓
</div>
<div>
  スクロール<br>
  ↓ ↓ ↓ ↓ ↓ ↓ ↓
</div>
<div>
  スクロール<br>
  ↓ ↓ ↓ ↓ ↓ ↓ ↓
</div>
<div>
  スクロール<br>
  ↓ ↓ ↓ ↓ ↓ ↓ ↓
</div>
<p class="color01"><span class="marker">
ここに蛍光ペンで引いたような線をつけたいテキストをいれる
</span></p>

<p class="color02">もちろん、<span class="marker">文章の途中でも</span>OKです。</p>
div {
  height:200px;
}
.marker.active{
  background-position: -100% .4rem;
}
 
.marker {
  background-repeat: repeat-x;
  background-size: 200% 100%;
  background-position: 0 .4rem;
  transition: all 2s ease;
}

.color01 .marker {
  background-image: -webkit-linear-gradient(left, transparent 50%, #ffb7ee 50%);
    background-image: -moz-linear-gradient(left, transparent 50%, #ffb7ee 50%);
    background-image: -ms-linear-gradient(left, transparent 50%, #ffb7ee 50%);
    background-image: -o-linear-gradient(left, transparent 50%, #ffb7ee 50%);
    background-image: linear-gradient(left, transparent 50%, #ffb7ee 50%);
}

.color02 .marker {
  background-image: -webkit-linear-gradient(left, transparent 50%, #b0ff8a 50%);
    background-image: -moz-linear-gradient(left, transparent 50%, #b0ff8a 50%);
    background-image: -ms-linear-gradient(left, transparent 50%, #b0ff8a 50%);
    background-image: -o-linear-gradient(left, transparent 50%, #b0ff8a 50%);
    background-image: linear-gradient(left, transparent 50%, #b0ff8a 50%);
}
$(window).scroll(function (){
 $(".marker").each(function(){
   var position = $(this).offset().top; 
   var scroll = $(window).scrollTop(); 
   var windowHeight = $(window).height(); 
   if (scroll > position - windowHeight){ 
     $(this).addClass('active'); 
   }
 });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js