https://www.kyowakirin.com/what_we_do/share/js/modules/FadeIn.js

1const config = {
2  // selector
3  fadeInUpSelector: '.js-fadeIn',
4
5  // class name
6  stateClassName: 'is-active',
7};
8
9export const setFadeIn = () => {
10  const { fadeInUpSelector, stateClassName } = config;
11
12  /** @type {NodeListOf<HTMLElement>} フェードイン対象の要素 */
13  const items = document.querySelectorAll(fadeInUpSelector);
14
15  if (!items.length) {
16    return;
17  }
18
19  const observer = new IntersectionObserver(
20    (entries, obs) => {
21      entries.forEach(({ isIntersecting, target, boundingClientRect }) => {
22        // 画面に対象が入ったらis-activeクラス付与
23        if (isIntersecting) {
24          target.classList.add(stateClassName);
25          obs.unobserve(target);
26        }
27
28        // すでに通過済み（画面より上）なら即表示
29        if (!isIntersecting && boundingClientRect.bottom < 0) {
30          target.classList.add(stateClassName);
31          obs.unobserve(target);
32        }
33      });
34    },
35    {
36      threshold: 0.3, //要素の30%が見えたら発火
37    }
38  );
39
40  items.forEach((item) => observer.observe(item));
41};