スクロールで「フワッ」と表示【threshold版】

コード例 - Sample

HTML

▶フワッとさせたい要素（ブロック単位）にclass「fuwa-target」を付ける ▶「fuwa-target」をネスト（入れ子）しないようにする

<div class="example">
 <ul>
  <li class="fuwa-target">タイトル1</li>
  <li class="fuwa-target">タイトル2</li>
  <li class="fuwa-target">タイトル3</li>
  <li class="fuwa-target">タイトル4</li>
  <li class="fuwa-target">タイトル5</li>
  <li class="fuwa-target">タイトル6</li>
  <li class="fuwa-target">タイトル7</li>
  <li class="fuwa-target">タイトル8</li>
  <li class="fuwa-target">タイトル9</li>
 </ul>
</div>

CSS

▶「ふわっとアニメーションに必要」と書かれている部分はアニメーションに必要 ▶アニメーションの内容は必要に応じて変更してください（ここでは「translateY」と「opacity」を使用） ▶「transition」の内容も必要に応じて変更してください

.example>ul{
 display: inline-flex;
 flex-direction: column;
 flex-wrap: nowrap;
}
.example>ul>li{
 display: flex;
 align-items: center;
 height: 5rem;
 padding: 0 2rem;
}
.example>ul>li:nth-child(odd){
 background-color: #deb887;
}
.example>ul>li:nth-child(even){
 background-color: #faebd7;
}
.example .fuwa-target{ /*ふわっとアニメーションに必要*/
 transition: all 1000ms 0s ease-out;
 transform: translateY(20px);
 opacity: 0;
}
.example .fuwa-active{ /*ふわっとアニメーションに必要*/
 transform: translateY(0);
 opacity: 1;
}

JavaScript

▶詳細はコード内に記載していますが要約すると ①「fuwa-target」classを付けた全要素を取得 ②それぞれの要素を「IntersectionObserver」で監視するように設定 ③監視対象の要素が画面内に入ったとき（0以外）に時classを追加 ④監視対象の要素が画面内から出たとき（0のとき）にclassを削除 ▶監視は続くので、画面内から出ると再度フワッと処理が入ります ▶フワッと処理を1回で止めたい場合は、「unobserve」を使い監視を解除する必要があります
下記コードの黄色い部分のコメントアウトを外して、解除を実行できるようにする

<script>
//「fuwa-target」classを付けた要素を取得
const fuwaElem = document.querySelectorAll('.fuwa-target');

//関数の実行
fuwa();

//IntersectionObserverを適用する関数
function fuwa(){
 //IntersectionObserverのオプションを設定
 //「threshold」を設定（0～1の範囲内の小数で設定　例：[0, 0.2, 0.4, 0.6, 0.8, 1]のような形でカンマで区切る）
 //ここでは[0, 1]の2つのタイミングで実行
 let options = {
  threshold: [0, 1]
 }

 //IntersectionObserverオブジェクトの生成
 const sOB = new IntersectionObserver(fuwaCallback, options);

 for(let i = 0; i < fuwaElem.length; i++){
  //IntersectionObserverの監視を「fuwa-target」classを付けた要素毎に適用
  sOB.observe(fuwaElem[i]);
 }
}

//IntersectionObserverでのコールバック関数
//引数aには、ターゲットになる要素の情報（交差情報などのオブジェクト配列）
//引数bには、生成したIntersectionObserverオブジェクト情報
function fuwaCallback(a, b){

 //「fuwa-target」classを付けた要素毎にコールバック処理
 a.forEach(function(e){
  let fadeElme = e.target; //ターゲットの要素を取得

  //「threshold」の状態を「intersectionRatio」の情報から取得
  if(e.intersectionRatio != 0){
   //「threshold」が0以外の時「fuwa-active」classを付与
   fadeElme.classList.add('fuwa-active');

   //監視の解除
   //b.unobserve(fadeElme);

  }else{
   //「threshold」が0の時「fuwa-active」classを削除
   fadeElme.classList.remove('fuwa-active'); //classを削除しない場合は無くても可

  }
 });
}
</script>