https://life-promotion.com/js/fade_move.js

1// fade_move.js
2// 対象：
3//  - フェード：.fade-in / .fade-in-up / .fade-in-left / .fade-in-right / .selif
4//  - ライン順次：親が .line の子要素
5//  - 見出し演出：.move → .animate 付与
6// 付与クラス：
7//  - フェード表示：.is-visible
8//  - 見出し演出：.animate
9
10(function () {
11  function initFadeMove() {
12    const fadeTargets = document.querySelectorAll(
13      '.fade-in, .fade-in-up, .fade-in-left, .fade-in-right, .selif'
14    );
15    const moveTargets = document.querySelectorAll('.move');
16
17    const allTargets = Array.prototype.slice.call(fadeTargets)
18      .concat(Array.prototype.slice.call(moveTargets));
19
20    if (!allTargets.length) return;
21
22    // 動きを減らす設定のユーザー配慮
23    if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
24      fadeTargets.forEach(el => el.classList.add('is-visible'));
25      moveTargets.forEach(el => el.classList.add('animate'));
26      return;
27    }
28
29    // IntersectionObserver 非対応フォールバック
30    if (!('IntersectionObserver' in window)) {
31      fadeTargets.forEach(el => el.classList.add('is-visible'));
32      moveTargets.forEach(el => el.classList.add('animate'));
33      return;
34    }
35
36    const observer = new IntersectionObserver(function (entries, obs) {
37      entries.forEach(function (entry) {
38        if (!entry.isIntersecting) return;
39
40        const el = entry.target;
41
42        // A) .move → 見出し用アニメ
43        if (el.classList.contains('move')) {
44          el.classList.add('animate');
45        }
46        // B) 親が .line → 順次フェード
47        else if (el.parentElement && el.parentElement.classList.contains('line')) {
48          const items = Array.prototype.slice.call(el.parentElement.children);
49          const index = items.indexOf(el);
50          const delay = index * 500; // 0.5秒ずつ
51
52          setTimeout(function () {
53            el.classList.add('is-visible');
54          }, delay);
55        }
56        // C) 通常フェード
57        else {
58          el.classList.add('is-visible');
59        }
60
61        obs.unobserve(el);
62      });
63    }, {
64      root: null,
65      rootMargin: '0px',
66      threshold: 0.1
67    });
68
69    allTargets.forEach(function (el) {
70      observer.observe(el);
71    });
72  }
73
74  if (document.readyState === 'loading') {
75    document.addEventListener('DOMContentLoaded', initFadeMove, { passive: true });
76  } else {
77    initFadeMove();
78  }
79})();