【jQuery】スクロールして可視範囲に入ったら下線を引くアニメーションの作り方

Geeklog
投稿者: 表示回数70

【jQuery】スクロールして可視範囲に入ったら下線を引くアニメーションの作り方

参考サイト:
https://yuyauver98.me/scroll-visible-range-underline-animation/

Geeklogで活用するには以下のように自動タグで利用します。

html

<p>[text-scroll-underline:pink ピンクの事例]</p>
<p>[text-scroll-underline:yellow 黄色の事例]</p>
<p>[text-scroll-underline: ブルーの事例]</p>
css

.Text-Span {
  position: relative;
  z-index: 1;
}
.Text-Span:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 0%;
  height: 8px;
  background: #dfdfff;
  z-index: -1;
  transition: all 0.8s;
}
.Text-Span.isActive:after {
  width: 100%;
}
.Text-Span-pink:after {
  background: #FFDFEF;
}
.Text-Span-yellow:after {
  background: #ffffbc;
}
Javascript追加

$(window).on('scroll',function(){

  $(".JS_ScrollAnimationItem").each(function(){
    var position = $(this).offset().top;
    var scroll = $(window).scrollTop();
    var windowHeight = $(window).height();
    if (scroll > position - windowHeight + 100 ){
      $(this).addClass('isActive');
    }
  });

 });
自動タグ: text-scroll-underline
<span class="Text-Span Text-Span-#1 JS_ScrollAnimationItem">#2</span></p>

ピンクの事例

黄色の事例

ブルーの事例

ピンクの事例

黄色の事例

ブルーの事例

ピンクの事例

黄色の事例

ブルーの事例

ピンクの事例

黄色の事例

ブルーの事例

ピンクの事例

黄色の事例

ブルーの事例

ピンクの事例

黄色の事例

ブルーの事例

ピンクの事例

黄色の事例

ブルーの事例

ピンクの事例

黄色の事例

ブルーの事例

ピンクの事例

黄色の事例

ブルーの事例

ピンクの事例

黄色の事例

ブルーの事例

ピンクの事例

黄色の事例

ブルーの事例

ピンクの事例

黄色の事例

ブルーの事例

ピンクの事例

黄色の事例

ブルーの事例

ピンクの事例

黄色の事例

ブルーの事例

ピンクの事例

黄色の事例

ブルーの事例

ピンクの事例

黄色の事例

ブルーの事例

ピンクの事例

黄色の事例

ブルーの事例

ピンクの事例

黄色の事例

ブルーの事例

ピンクの事例

黄色の事例

ブルーの事例

ピンクの事例

黄色の事例

ブルーの事例

ピンクの事例

黄色の事例

ブルーの事例

ピンクの事例

黄色の事例

ブルーの事例