おぼえがき

                  
//フェードイン

//「.in-fade-up」下かららフェードイン
//「.in-fade-left」左からフェードイン
//「.in-fade-right」右からフェードイン

document.addEventListener('DOMContentLoaded', function () {
  const boxes = document.querySelectorAll('.in-fade-up,.in-fade-left,.in-fade-right');

  const options = {
    //監視対象の「基準」はブラウザの画面（viewport）
    root: null,

    //下側を「10% 手前」で発火させる。
    ///画面に完全に入る前に検知してアニメーションさせることができる。
    rootMargin: '0px 0px -10% 0px',

    //要素が 1ピクセルでも画面に入ったら 反応する。
    threshold: 0
  };

  const observer = new IntersectionObserver(function (entries, observer) {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('is-active');
        observer.unobserve(entry.target); // 1回だけ実行（不要なら削除）
      }
    });
  }, options);

  boxes.forEach(box => observer.observe(box));
});
                  
                

                  
/* 下からフェードイン */
.in-fade-up {
  opacity: 0;
  visibility: hidden;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.in-fade-up.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 左からフェードイン */
.in-fade-left {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-100%);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.in-fade-left.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* 右からフェードイン */
.in-fade-right {
  opacity: 0;
  visibility: hidden;
  transform: translateX(100%);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.in-fade-right.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}