【JavaScript】スクロールアニメーションをIntersection Observerを使って実装する方法

window.addEventListener('scroll', function(){
   //ここに処理を書く
});

<section class="d-demo__section js-trigger">
  <div class="d-demo__section_inner">
    <div class="d-demo__block is-fade_in_zoom">
      <div class="d-demo__img">
        <img src="./images/test-img01.jpg" alt="" />
      </div>
      <div class="d-demo__img">
        <img src="./images/test-img02.jpg" alt="" />
      </div>
    </div>
  </div>
</section>

var option = {
  root: null, //nullでブラウザ画面を対象にする
  rootMargin: "0% 0% -20% 0%", //画面の下から-20%の位置をターゲットと交差する位置に指定
  threshold: 0.2, //指定した要素が画面に20%入るとコールバッイベント発生
};

// 交差した際の処理を記載
var callback = function (entries) {
  
  entries.forEach(function (entry) {
    
    if (entry.intersectionRatio > 0.2) { //交差する位置が20%を超えたら…

      var targets = entry.target.getElementsByClassName("d-demo__block"); //クラス名d-demo__blockのHTML要素を取得
      var targetsArray = Array.prototype.slice.call(targets, 0); //配列に変換

      targetsArray.forEach(function (item) { //配列化したものを１つ１つ処理していく
        var targetClassList = item.classList; //d-demo__blockと一緒に指定されているクラス名を取得

        if( targetClassList.contains('is-fade_in_side') == true ){ //クラス名is-fade_in_sideがあれば…
          targetClassList.add("is-fade_in_side--done"); //クラス名is-fade_in_side--doneを付与する
        } else if (targetClassList.contains('is-fade_in_updown') == true) { //クラス名is-fade_in_updownがあれば…
          targetClassList.add("is-fade_in_updown--done"); //クラス名is-fade_in_updown--doneを付与する
        } else if(targetClassList.contains('is-fade_in_zoom') == true){ //クラス名is-fade_in_zoomがあれば…
          targetClassList.add("is-fade_in_zoom--done"); //クラス名is-fade_in_zoom--doneを付与する
        } 
      });
      observeres.unobserve(entry.target); //ターゲットの監視を終了
    }
  });
};
var observeres = new IntersectionObserver(callback, option); //引数callback、optionを持ったobserverインスタンスを作成

var trigger = document.getElementsByClassName("js-trigger"); //ターゲットとなるクラス名js-triggerをすべて格納

for (let i = 0; i < trigger.length; i++) {
  observeres.observe(trigger[i]); //ターゲットごとに監視を開始する
}

var trigger = document.getElementsByClassName("js-trigger"); //ターゲットとなるクラス名js-triggerをすべて格納

for (let i = 0; i < trigger.length; i++) {
  observeres.observe(trigger[i]); //ターゲットごとに監視を開始する
}

var observeres = new IntersectionObserver(callback, option); //引数callback、optionを持ったobserveresインスタンスを作成

var option = {
  root: null, //nullでブラウザ画面を対象にする
  rootMargin: "0% 0% -20% 0%", //ブラウザ画面の下から-20%の位置をターゲットと交差する位置に指定
  threshold: 0.2, //指定した要素が画面に20%入るとコールバックイベント発生
};

// 交差した際の処理を記載
var callback = function (entries) {
  
  entries.forEach(function (entry) {
    
    if (entry.intersectionRatio > 0.2) { 

      //交差する位置が20%を超えたら、この中の処理を開始      

    }
  });
};

var targets = entry.target.getElementsByClassName("d-demo__block"); //クラス名d-demo__blockのHTML要素を取得
var targetsArray = Array.prototype.slice.call(targets, 0); //配列に変換

    targetsArray.forEach(function (item) { //配列化したものを１つ１つ処理していく
    var targetClassList = item.classList; //d-demo__blockと一緒に指定されているクラス名を取得

      if( targetClassList.contains('is-fade_in_side') == true ){ //クラス名is-fade_in_sideがあれば…
        targetClassList.add("is-fade_in_side--done"); //クラス名is-fade_in_side--doneを付与する
      } else if (targetClassList.contains('is-fade_in_updown') == true) { //クラス名is-fade_in_updownがあれば…
        targetClassList.add("is-fade_in_updown--done"); //クラス名is-fade_in_updown--doneを付与する
      } else if(targetClassList.contains('is-fade_in_zoom') == true){ //クラス名is-fade_in_zoomがあれば…
        targetClassList.add("is-fade_in_zoom--done"); //クラス名is-fade_in_zoom--doneを付与する
      } 
    });

observeres.unobserve(entry.target); //ターゲットの監視を終了

/* アニメーションを使うため先にベンダープレフィックスを定義
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@mixin keyframes($animation-name: animation) {
  @-webkit-keyframes #{$animation-name} {
    @content;
  }
  @keyframes #{$animation-name} {
    @content;
  }
}

/* アニメーションを使うため上とセット
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@mixin animation($animation-name) {
  -webkit-animation: $animation-name;
  animation: $animation-name;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* zoomのkeyframes
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@include keyframes (fade-in-zoom) {
  0% {
    filter: blur(3px);
    transform: scale(1.2);
    opacity: 0;
  }
  100% {
    filter: blur(0);
    transform: scale(1);
    opacity: 1;
  }
}

/* クラス名の指定
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.is-fade_in_zoom {
  opacity: 0;
}
.is-fade_in_zoom.is-fade_in_zoom--done {
  opacity: 1;
  .demo__img {
    @include animation(fade-in-zoom 1s ease 0.1s);
  }
}

<script src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"></script>