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

こんにちは。

ゆうや（@yuyaphotograph）です！

この記事では、

スクロールしてテキストが可視範囲に入ったら下線を引くアニメーションの実装方法を知りたい

という方のお悩みを解決します！

実装ポイント
HTML、CSS、Javascriptのコードを見る
スクロール × 下線アニメーションのデモ
まとめ

実装ポイント

今回の実装ポイントは3つ！

下線は疑似要素 afterで作り初期状態ではwidth:0%にしておく
スクロールの位置がテキストの位置を過ぎたらその要素にisActiveクラスを付与する
isActiveクラスがついている時の要素の疑似要素 afterの横幅をwidth:100%にする

HTML、CSS、Javascriptのコードを見る

HTML、CSS、Javascriptのコードをそれぞれ紹介！

HTMLは以下を使用します。

HTML

<div></div>

<p class="Text"><span class="Text-Span JS_ScrollAnimationItem">下線アニメーション</span></p>
<p class="Text"><span class="Text-Span JS_ScrollAnimationItem">下線アニメーション</span></p>
<p class="Text"><span class="Text-Span JS_ScrollAnimationItem">下線アニメーション</span></p>

divはスクロールする分の高さのためにダミーで置いてあるだけです。

CSSは以下を使用します。

CSS

.Text-Span {
  position: relative;
  z-index: 1;
}
.Text-Span:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -14px;
  width: 0%;
  height: 4px;
  background: #5bc8ac;
  z-index: -1;
  transition: all 0.8s;
}
.Text-Span.isActive:after {
  width: 100%;
}

div{
  margin-bottom: 48px;
  width: 100%;
  height: 320px;
  background: #5bc8ac;
}

アニメーションのスピードはtransitionプロパティで設定調整します。
速度はよしなに変更してくださいまし。

今回の肝、スクロール部分のコードは以下を使用します。

index.js

$(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){
      $(this).addClass('isActive');
    }
  });
  
 });

複数要素に対応できるようにjQueryのeachメソッドも活用しております。

アニメーションの発火タイミングを遅くしたい場合は、
scroll > position – windowHeight + 160といった感じで調整してください〜

スクロール × 下線アニメーションのデモ

下の方にスクロールしていくと下線アニメーションが表示されるので確認してみてくださいまし〜

See the Pen
OJVrxaW by 石森裕也 (@yuyaphotograph)
on CodePen.

まとめ

今回紹介したTipsは下線アニメーションに限らず、例えば「可視範囲に入ったら要素をフェードインで表示させる」なんてことにも活かせますね！

「jQueryなしで超絶簡単にいい感じのスクロールアニメーションを実装してみたい！」

という方は以下の記事で紹介しているライブラリ AOSがおすすめですので目を通してみてください〜

スクロールアニメーションをjQueryなしで簡単実装できるライブラリ AOSの使い方