jQueryを使ってスクーロル時にフワッと文字が浮き上がって出るやつ

はじめに

今回はタイトルにある通りスクロール時にフワッと要素が浮き上がってくる機能を実装したので備忘録として記録していきます。
今回はjQueryを使っての実装になるのでそちらの準備をしてから実装に入って下さい
私自信プログラミング初心者なので間違いなどあればご指摘の程よろしくお願いします！

ステップ１ フワッとさせたい要素を作る

  <div class="container">
  </div>

  <div class="container2">
    <h1>フワッと現れる</h1>
  </div>

.container {
  height: 100vh;
  width: 100%;
  background-color: aquamarine;
}

.container2 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100%;
  background-color: rgb(147, 147, 197);
}

こちらはなんの変哲もないhtmlとcssです。
h１タグの部分をスクロールと共に出現するように実装していきます！

ステップ２　JavaScriptの記述

基本的にスクロールに応じてアニメーションを付けるためのJsの流れは
１、ブラウザの表示できる領域の高さを取得
２、スクロール位置を取得
３、アニメーションをさせたい要素のY軸（縦）の位置を取得
４、アニメーションさせる要素かどうかを判断する
５、アニメーションをさせる要素だった場合、クラス.fadeInを追加

これらをコードにすると

$(function () {
  $(window).scroll(function () {
      const wHeight = $(window).height();
      const scrollPosition = $(window).scrollTop();
      $('.scroll').each(function () {
          const targetPosition = $(this).offset().top;
          if(scrollPosition > targetPosition - wHeight + 60) {
              $(this).addClass("fadeIn");
          }
      });
  });
});

まず1、２行目でスクロール時のアクションを定義します。
3行目でブラウザ表示領域の高さをconst wHeightに代入しています。
4行目でスクロール位置の高さをscrollPositionに代入しています。
5行目でクラスscrollが付与されてる要素を繰り返し処理を行っています。
6行目でアニメーションを行いたい要素の高さを取得しています。
7行目でif文でスクロール位置 > 対象となる要素の縦位置 – 表示領域の高さ + 60を定義
ここで+60などを指定しないと画面の下部でアニメーションが行われていて確認が難しくなるためです。
なのでここの値はお好みの値を指定して下さい。
8行目で条件式を満たした場合クラスfeadInを追加してます。

ステップ３ cssでアニメーションを定義する

/*1.フェードインアニメーションの指定*/
.scroll {opacity: 0;} /*一瞬表示されるのを防ぐ*/
.fadeIn {
    animation-name: fadeIn;
    animation-duration: 5s;
    animation-fill-mode: forwards;
}
@keyframes fadeIn {
    0% {
        opacity: 0;         
    }
    100% {
    opacity: 1;
    transform: translate(0);
    }
}

cssで実際にアニメーションを作っていきます。
まずfeadInクラスの説明をします
こちらでアニメーションの名前やかかる時間などの設定をしていきます！
animation-nameでアニメーションの名前を定義しています。
animation-duration: 5s;でアニメーションにかかる時間を設定しています。
animation-fill-mode: forwards;でアニメーション後そのままの状態を維持する記述です。

次に@keyframesでアニメーションの挙動を設定していきます
@keyframesのあとは上で設定したアニメーションの名前を記述して下さい。
実際にこの部分の記述でどのように要素を変化させるかを設定していきます。
今回は0%の時と100%の時の要素の状態を定義していますが、50%や75%など細かく設定する事ができるのでお好みで設定してみて下さい。

これで一通りの準備ができましたので挙動を確認してみましょう！

最後に

僕自身フロント実装は苦手なのですが実際アニメーションを作ってみるととても楽しいですし、モダンなサイト作成には必須な技術かと思うので、今後も少しずつ扱えるようにしたいと思いました！！
まだまだプログラミング初心者のためご指摘などあればよろしくお願いします！