【Jquery】スクロール時に文字を下からフェードインさせる方法

おはようございます。
今日はおしゃれなサイトによくある文字がフワっとでてくるやつの実装方法を書いていこうと思います。今回はopacity(透明度)を使って実装していきます。完成形のイメージは下記になります。
https://gyazo.com/a45b65dfa8dcb0ba9f8f931368fd453c

実装の流れ

①　フワッとさせたい要素に対して新たにクラスをつける
②　CSSで要素の初期設定を行う
③　Jqueryでスクロールしたときに文字を移動させながら、透明度を0から1へ（完全に不透明）変化させる

以上になります。簡単に実装することができました。

①　フワッとさせたい要素に対して新たにクラスをつける

フワッとさせたい要素に対して好きなクラス名を付けます。
index.html.haml

.ticket__transfer__rightbox
  .ticket__transfer__rightbox__title.fadeInUp  # fadeInUpクラスを追記
    チケット譲渡
  .ticket__transfer__rightbox__explanation.fadeInUp  # fadeInUpクラスを追記
    イベント開催間際でも行けなくなったイベントチケットをSNSアカウントや
     %br
     プロフィールを見て譲りたいファンの方に譲渡することができます。
     %br
     また、チケットを探している人は定価でチケットを手に入れるチャンスがあります。
     %br
     本アプリでは定価の10%以上の価格でのチケット譲渡は行えない仕様になっております。
  .ticket__transfer__rightbox__button.fadeInUp  # fadeInUpクラスを追記
    = link_to "transfer", "#"

②　CSSで要素の初期設定を行う

ここではページを読み込んだ際の要素のCSSを書きます。ページを読み込んだ際なので、当然要素は写りませんし、本来あるべき箇所より、下にあります。（下記画像参考）
f:id:shun_0211:20200613114049j:plain
では、実際にコードを見ていきます。

_ticket.scss

.fadeInUp{
   // opacity → 不透明度の指定
  opacity : 0;
   // transform → 移動距離の指定
   transform: translateY(50px);
   // transition → 移動時間の指定
   transition: 2.5s;
}

opacityで透明度の指示

opacityは透明度を示します。透明度の初期設定は0にします。これで要素は見えなくなります。

transformで移動距離の指定

transformで要素を移動させることができます。この場合、Y軸方向（縦）に50px移動させます。ここを変更することでどれくらいの距離をフェードさせるか変更することができます。

transitionで移動時間の指定

transitionで変化するまでの時間を指定できます。ここを変更することで何 sで移動させるか変更することができます。

③　Jqueryでスクロールしたときに文字を移動させながら、透明度を0から1へ（完全に不透明）変化させる

ここからが本番です。まずはコードを記載します。
top_page.js

$(function(){
  function animation(){
    $('.fadeInUp').each(function(){
      // offset() → HTML要素の表示位置を座標で取得できるメソッド
      // これにtopを組み合わせることで、Y座標のみを取得できる
      var target = $(this).offset().top;
      //スクロール量を取得
      var scroll = $(window).scrollTop();
      //ウィンドウの高さを取得
      var windowHeight = $(window).height();
      //ターゲットまでスクロールするとフェードインする
      if (scroll > target - windowHeight){
        $(this).css('opacity','1');
        $(this).css('transform','translateY(0)');
      }
    });
  }
  $(window).scroll(function (){
    animation();
  });
});

$(window).scroll(function (){ ~~

画面がスクロールされたとき、animation関数を実行します。これによりスクロール時に都度animation関数が走ります。

$('.fadeInUp').each(function(){ ~~

fadeInUpのクラス名がついている要素一つ一つに対してフェードインの処理を実行します。こういう場面でeach文が使えるというのは勉強になりました。

var target = $(this).offset().top;

$(this)でfadeInUpのクラス名がついている要素を取得しています。これにoffset()メソッドを用いることで、要素の表示位置を座標で取得できます。今回はY軸の座標しか必要ないため、.topをつけてY軸だけ取得しています。

var scroll = $(window).scrollTop();

scrollTop()メソッドはスクロール量を取得することができます。windowオブジェクトに対して行います。
※ windowオブジェクト → ブラウザを操作するための機能を集めたオブジェクトのこと

var windowHeight = $(window).height();

height()メソッドを使って画面の高さのピクセルを取得しています。

if (scroll > target - windowHeight){ ~~

条件分岐を使って処理をします。スクロール量が要素の高さから画面の高さを引いた量を上回った場合、以下のCSSを適用します。

$(this).css('opacity','1');  # 透明度を1に（不透明化）
$(this).css('transform','translateY(0)');  # 移動距離を0に（元の位置に戻る）

これで、faceInUpクラスに適用したCSSから2.5 sかけて元に戻る処理が書けました。

終わり！

最後に

以上になります。JavaScriptについてある程度理解がある人であれば簡単に実装できると思います。ここまで読んでくださり、ありがとうございました。分かりにくいやアドバイス等ありましたらコメントくださると幸いです。では！

参考サイト

https://recooord.org/fadein-window-scroll/