【jQuery】可視領域に入ると蛍光ペンが伸びるアニメーション

2022.7.11

【jQuery】可視領域に入ると蛍光ペンが伸びるアニメーション

ページをスクロールして、可視領域に入ると、蛍光ペンが引かれていく様なアニメーションをご紹介します。

可視領域に入ると蛍光ペンが伸びるアニメーション方法

HTML
<span class="marker">
ここに蛍光ペンで引いたような線をつけたいテキストをいれる
</span>

HTMLはclass=”marker”としています。

CSS
.marker.active{
  background-position: -100% .7rem;
}

.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%);
  background-repeat: repeat-x;
  background-size: 200% 100%;
  background-position: 0 .7rem;
  transition: all 2s ease;
}

背景色の高さを変えたい時は、
.marker.activeと、.markerの
background-position: -100% .7rem;の『.7rem』を調整します。

jQuery
$(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'); 
   }
 });
});

可視領域に入ったら、activeを付与します。

実装結果

<br /> See the Pen <a href="https://codepen.io/Uchaaan/pen/eYeWdjP"><br /> 可視領域に入ると蛍光ペンが伸びる</a> by Uchaaan (<a href="https://codepen.io/Uchaaan">@Uchaaan</a>)<br /> on <a href="https://codepen.io">CodePen</a>.<br />