要素が画面に入るとアニメーションで下線を表示させる方法

要素が画面に入るとアニメーションで下線を表示させる手順

具体的な手順を解説していきます。
今回のカスタマイズは、以下の3ステップで実装可能です。

1. jQueryを実装する
2. CSSで下線を装飾する
3. 下線を表示させたい箇所にクラスを設置する

個別に見ていきましょう。

手順1：jQueryを実装する

まず、下記のコードをfooter.phpなどに記述しましょう。

<script>
$(window).scroll(function (){
 $(".marker_animation").each(function(){
   var position = $(this).offset().top;
   var scroll = $(window).scrollTop();
   var windowHeight = $(window).height();
   if (scroll > position - windowHeight){
     $(this).addClass('active');
   }
 });
});
</script>

上記のコードを簡単に説明しますと、ウィンドウの高さなどを取得し、要素が画面内に入ったらクラス「active」が追加されるといったものです。

クラス「active」に、下線をアニメーション表示させる装飾を施しておくことで、画面に要素が入った時、下線をアニメーション表示させる仕組みです。

手順2：CSSで下線を装飾する

つぎに、下線とアニメーションをCSSで定義してやります。

.marker_animation.active{
background-position: -100% .8em;
}
.marker_animation {
background-image: -webkit-linear-gradient(left, transparent 50%, rgb(255,250,90) 10%);
background-image: -moz-linear-gradient(left, transparent 50%, rgb(255,250,90) 10%);
background-image: -ms-linear-gradient(left, transparent 50%, rgb(255,250,90) 10%);
background-image: -o-linear-gradient(left, transparent 50%, rgb(255,250,90) 10%);
background-image: linear-gradient(left, transparent 50%, rgb(255,250,90) 10%);
background-repeat: repeat-x;
background-size: 200% .4em;
background-position: 0 .8em;
transition: all 1s ease;
font-weight: bold;
}

こちらのCSSはお好みで変更してください。
変更するであろう箇所を、ザックリとですが解説しておきます。

rgb(255,250,90)

上記の部分が、下線の色を指定している部分です。
RGBの値を好みの色に変更してください。

rgb(255,250,90) 10%)

上記の【10%】の部分が、下線の濃さを定義している部分です。
値が大きくなるほど、下線が薄くなります。

background-size: 200% .4em;

上記の【.4em】の部分が、下線の太さを定義しています。
値が大きくなるほど、下線を太くできます。

background-position: 0 .8em;

上記の【.8em】部分が、下線とテキストの距離を定義しています。
値が大きくなるほど、下線がテキストから離れます。

この部分の修正には、注意が必要です。
この部分の値を編集した場合、以下の部分も同じ値にしなければなりません。

background-position: -100% .8em;

上記の【.8em】の部分です。
この2ヶ所は、必ず同じ値にしましょう。

手順3：下線を表示させたい箇所にクラスを設置する

最後に、アニメーションで下線を表示させたい箇所にCSSのクラス【.marker_animation】を設定してやります。

<span class="marker_animation">アニメーションで下線を表示させたいテキスト</span>

すると、以下の様に下線が表示されます。

アニメーションで下線を表示させたいテキスト

以上です。

まとめ

要素が画面に入るとアニメーションで下線を表示させる方法をご紹介しました。

1. jQueryを実装する
2. CSSで下線を装飾する
3. 下線を表示させたい箇所にクラスを設置する

上記の3ステップで、この行のようなアニメーションを実装することができます。
興味のある方は、挑戦してみてください。