https://i-shift.com/wp-content/themes/OriginalTheme/asset/js/bg-dpth.js

1jQuery(function ($) {
2  const sections = document.querySelectorAll('.dpth-CMN.dpth-scale, .dpth-CMN.dpth-shift');
3  if (!sections.length) return;
4
5  const mqlSP = window.matchMedia('(max-width: 768px)');
6  const mqlReduce = window.matchMedia('(prefers-reduced-motion: reduce)');
7
8  const clamp = (v, min, max) => Math.min(Math.max(v, min), max);
9  const lerp  = (a, b, t) => a + (b - a) * t;
10  const easeOutPower = (p, k) => 1 - Math.pow(1 - p, k);
11
12  // shiftは「最大移動量 = のりしろ = PAD」で統一（白が出ない）
13  const getShiftPad = () => (mqlSP.matches ? 50 : 120);
14
15  // shiftの反応（rect.topをどれだけ効かせるか）
16  const getShiftSpeed = () => (mqlSP.matches ? 0.16 : 0.40);
17  const getShiftInertia = () => (mqlSP.matches ? 0.06 : 0.05);
18
19  // scale（拡大縮小）
20  const getScaleMin = () => 1.00;
21  const getScaleMax = () => (mqlSP.matches ? 1.00 : 1.36);
22  const getScaleInertia = () => (mqlSP.matches ? 0 : 0.045);
23  const getScaleTravel = () => (mqlSP.matches ? 1.0 : 1.15);
24  const getScaleK = () => (mqlSP.matches ? 1.0 : 2.0);
25
26  /* ========================= */
27
28  const state = [];
29  for (const sec of sections) {
30    const bg = sec.querySelector('.dpth-bg');
31    if (!bg) continue;
32
33    bg.style.transition = 'none';
34
35    const hasShift = sec.classList.contains('dpth-shift');
36    const hasScale = sec.classList.contains('dpth-scale');
37
38    state.push({
39      sec,
40      bg,
41      hasShift,
42      hasScale,
43      y: 0,
44      targetY: 0,
45      s: getScaleMin(),
46      targetS: getScaleMin(),
47    });
48
49    // 初期化：shift単体はtranslateのみ（scaleは入れない）
50    bg.style.transform = 'translate3d(0,0,0)';
51    bg.style.willChange = 'transform';
52  }
53  if (!state.length) return;
54
55  let running = false;
56
57  function applyTransform(st) {
58    if (st.hasShift && !st.hasScale) {
59      st.bg.style.transform = `translate3d(0, ${st.y}px, 0)`;
60      return;
61    }
62    if (!st.hasShift && st.hasScale) {
63      st.bg.style.transform = `translate3d(0,0,0) scale(${st.s})`;
64      return;
65    }
66    if (st.hasShift && st.hasScale) {
67      st.bg.style.transform = `translate3d(0, ${st.y}px, 0) scale(${st.s})`;
68      return;
69    }
70    st.bg.style.transform = 'translate3d(0,0,0)';
71  }
72
73  function computeTargets() {
74    const viewportH = window.innerHeight || 1;
75
76    const shiftPad = getShiftPad();
77    const shiftSpeed = getShiftSpeed();
78
79    const scaleMin = getScaleMin();
80    const scaleMax = getScaleMax();
81    const scaleTravel = getScaleTravel();
82    const scaleK = getScaleK();
83
84    for (const st of state) {
85      const rect = st.sec.getBoundingClientRect();
86      const far = rect.bottom < -viewportH || rect.top > viewportH * 2;
87
88      if (st.hasShift) {
89        st.targetY = far ? 0 : clamp(rect.top * shiftSpeed, -shiftPad, shiftPad);
90      }
91
92      if (st.hasScale) {
93        if (mqlSP.matches || far) {
94          st.targetS = scaleMin;
95        } else {
96          const start = viewportH * scaleTravel;
97          const pRaw = (start - rect.top) / start;
98          const p = clamp(pRaw, 0, 1);
99          const p2 = easeOutPower(p, scaleK);
100          st.targetS = lerp(scaleMin, scaleMax, p2);
101        }
102      }
103    }
104  }
105
106  function tick() {
107    let moving = false;
108
109    for (const st of state) {
110      if (st.hasShift) {
111        st.y = lerp(st.y, st.targetY, getShiftInertia());
112        if (Math.abs(st.targetY - st.y) > 0.1) moving = true;
113      }
114
115      if (st.hasScale) {
116        st.s = lerp(st.s, st.targetS, getScaleInertia());
117        if (Math.abs(st.targetS - st.s) > 0.001) moving = true;
118      }
119
120      applyTransform(st);
121    }
122
123    if (moving) requestAnimationFrame(tick);
124    else running = false;
125  }
126
127  function onChange() {
128    computeTargets();
129    if (!running) {
130      running = true;
131      requestAnimationFrame(tick);
132    }
133  }
134
135  if (!mqlReduce.matches) {
136    window.addEventListener('scroll', onChange, { passive: true });
137    window.addEventListener('resize', onChange);
138    onChange();
139  } else {
140    for (const st of state) {
141      st.y = st.targetY = 0;
142      st.s = st.targetS = getScaleMin();
143      applyTransform(st);
144    }
145  }
146});