https://www.dimage.co.jp/assets/js/mv.js

1document.addEventListener("DOMContentLoaded", () => {
2  const gradationPath = document.querySelector(".p-fv__layer-gradation path");
3  const gradationPathSp = document.querySelector(".p-fv__layer-gradation_sp path");
4  const clipBoxPath = document.querySelector("#gradationClipBox path");
5
6  const VIEWBOX_W = 1680;
7  const VIEWBOX_H = 1098;
8
9  /** viewBox 座標の path d を objectBoundingBox(0-1) に変換（M,C,L,H,V,Z 対応） */
10  function pathToObjectBoundingBox(d) {
11    if (!d || typeof d !== "string") return "";
12    const tokens = d.trim().match(/[MLHVCSQTAZ]|[-+]?[\d.e+-]+/gi);
13    if (!tokens || !tokens.length) return "";
14    let out = "";
15    let i = 0;
16    let cmd = "";
17    while (i < tokens.length) {
18      const t = tokens[i];
19      if (/^[MLHVCSQTAZ]$/i.test(t)) {
20        cmd = t.toUpperCase();
21        out += t;
22        i++;
23        continue;
24      }
25      const n = parseFloat(t);
26      if (isNaN(n)) {
27        i++;
28        continue;
29      }
30      if (cmd === "M" || cmd === "L") {
31        const x = n;
32        const y = parseFloat(tokens[i + 1]);
33        if (isNaN(y)) break;
34        out += (x / VIEWBOX_W) + " " + (y / VIEWBOX_H);
35        i += 2;
36      } else if (cmd === "C") {
37        const n1 = parseFloat(tokens[i + 1]);
38        const n2 = parseFloat(tokens[i + 2]);
39        const n3 = parseFloat(tokens[i + 3]);
40        const n4 = parseFloat(tokens[i + 4]);
41        const n5 = parseFloat(tokens[i + 5]);
42        if ([n1, n2, n3, n4, n5].some(Number.isNaN)) break;
43        out += [
44          n / VIEWBOX_W, n1 / VIEWBOX_H,
45          n2 / VIEWBOX_W, n3 / VIEWBOX_H,
46          n4 / VIEWBOX_W, n5 / VIEWBOX_H
47        ].join(" ");
48        i += 6;
49      } else if (cmd === "H") {
50        out += (n / VIEWBOX_W);
51        i += 1;
52      } else if (cmd === "V") {
53        out += (n / VIEWBOX_H);
54        i += 1;
55      } else {
56        i++;
57      }
58    }
59    return out;
60  }
61
62  function syncClipBoxFromGradation() {
63    if (!clipBoxPath || !gradationPath) return;
64    const d = gradationPath.getAttribute("d");
65    if (d) clipBoxPath.setAttribute("d", pathToObjectBoundingBox(d));
66  }
67
68  if (gradationPath) {
69    const gradationBase =
70      "M1754.41 0.0606079C1265.8405 0.0606079 1136.2955 274.545455925 974.364125 549.03030395C812.43275 823.515151975 618.115 1098 0 1098L0 -196H1804L1754.41 0.0606079Z";
71    const gradationWave01 =
72      "M1754.41 0.0606079C1295.8405 30.0606079 1166.2955 244.545455925 1004.364125 519.03030395C842.43275 793.515151975 628.115 1098 0 1098L0 -196H1804L1754.41 0.0606079Z";
73    const gradationWave02 =
74      "M1754.41 0.0606079C1235.8405 -20.0606079 1106.2955 314.545455925 954.364125 569.03030395C802.43275 843.515151975 588.115 1098 0 1098L0 -196H1804L1754.41 0.0606079Z";
75    const gradationWave03 =
76      "M1754.41 0.0606079C1275.8405 50.0606079 1146.2955 294.545455925 944.364125 539.03030395C742.43275 803.515151975 658.115 1098 0 1098L0 -196H1804L1754.41 0.0606079Z";
77    const gradationWaveLeft =
78      "M1754.41 0.0606079C1265.8405 0.0606079 1056.2955 274.545455925 894.364125 549.03030395C732.43275 823.515151975 618.115 1098 0 1098L0 -196H1804L1754.41 0.0606079Z";
79    const gradationWaveRight =
80      "M1754.41 0.0606079C1265.8405 0.0606079 1216.2955 274.545455925 1054.364125 549.03030395C892.43275 823.515151975 618.115 1098 0 1098L0 -196H1804L1754.41 0.0606079Z";
81
82    syncClipBoxFromGradation();
83
84    let clipSyncFrame = 0;
85    const SYNC_EVERY_N_FRAMES = 5;
86    function onGradationUpdate() {
87      clipSyncFrame++;
88      if (clipSyncFrame % SYNC_EVERY_N_FRAMES === 0) syncClipBoxFromGradation();
89    }
90
91    const tl = gsap.timeline({
92      repeat: -1,
93      defaults: { duration: 3, ease: "sine.inOut", onUpdate: onGradationUpdate },
94    });
95    tl.to(gradationPath, { attr: { d: gradationWave01 } })
96      .to(gradationPath, { attr: { d: gradationWaveRight } })
97      .to(gradationPath, { attr: { d: gradationWave02 } })
98      .to(gradationPath, { attr: { d: gradationWaveLeft } })
99      .to(gradationPath, { attr: { d: gradationWave03 } })
100      .to(gradationPath, { attr: { d: gradationBase } });
101  }
102
103  // SP用グラデーションレイヤー波打ちアニメーション
104  if (gradationPathSp) {
105    const baseSp = "M-0.00012207 0H372C289 120 337 226 253.5 356.5C170 487 -0.00012207 582 -0.00012207 582V0Z";
106    const wave01Sp = "M-0.00012207 0H372C289 95 337 201 253.5 331.5C170 462 -0.00012207 582 -0.00012207 582V0Z";
107    const wave02Sp = "M-0.00012207 0H372C289 145 337 251 253.5 381.5C170 512 -0.00012207 582 -0.00012207 582V0Z";
108    const wave03Sp = "M-0.00012207 0H372C289 105 337 211 253.5 341.5C170 472 -0.00012207 582 -0.00012207 582V0Z";
109    const waveLeftSp = "M-0.00012207 0H372C269 120 317 226 233.5 356.5C150 487 -0.00012207 582 -0.00012207 582V0Z";
110    const waveRightSp = "M-0.00012207 0H372C309 120 357 226 273.5 356.5C190 487 -0.00012207 582 -0.00012207 582V0Z";
111
112    const tlSp = gsap.timeline({
113      repeat: -1,
114      defaults: { duration: 3, ease: "sine.inOut" },
115    });
116    tlSp.to(gradationPathSp, { attr: { d: wave01Sp } })
117      .to(gradationPathSp, { attr: { d: waveRightSp } })
118      .to(gradationPathSp, { attr: { d: wave02Sp } })
119      .to(gradationPathSp, { attr: { d: waveLeftSp } })
120      .to(gradationPathSp, { attr: { d: wave03Sp } })
121      .to(gradationPathSp, { attr: { d: baseSp } });
122  }
123});
124
125document.addEventListener("DOMContentLoaded", () => {
126  // グリッドアニメーション
127  const gridContainer = document.getElementById("gridContainer");
128  const layerGradation = document.querySelector(".p-fv__layer-gradation");
129
130  if (gridContainer && layerGradation) {
131    const cellSize = 17;
132    const gap = 7;
133
134    const containerWidth = layerGradation.offsetWidth || gridContainer.offsetWidth || window.innerWidth;
135    // PC: .p-fv固定1046px × .p-fv__layer-gradation 90% = 941px、SP: 従来の計算
136    const isSp = window.innerWidth <= 768;
137    const widthRatio = window.innerWidth / (isSp ? 375 : 1680);
138    const containerHeight = isSp
139      ? 582 * widthRatio
140      : (layerGradation.offsetHeight || 1046 * 0.9);
141
142    // 必要な列数を計算（+1の余裕のみ）
143    const cols = Math.ceil(containerWidth / (cellSize + gap)) + 1;
144

145    // 画面分の行数のみ（clip-pathで見えない領域は生成しない）
146    const rows = Math.ceil(containerHeight / (cellSize + gap));
147
148    const totalCells = cols * rows;
149
150    const fragment = document.createDocumentFragment();
151
152    for (let i = 0; i < totalCells; i++) {
153      const cell = document.createElement("div");
154      cell.classList.add("grid-cell");
155
156      // ランダムなタイミング設定（軽量化：duration範囲を狭める）
157      // const randomDelay = Math.random() * 8;
158      const randomDelay = Math.random() * 16;
159      cell.style.animationDelay = `${randomDelay}s`;
160
161      // const randomDuration = 6 + Math.random() * 8;
162      const randomDuration = 6 + Math.random() * 16;
163      cell.style.animationDuration = `${randomDuration}s`;
164
165      fragment.appendChild(cell);
166    }
167
168    gridContainer.appendChild(fragment);
169  }
170
171  // SP用グリッドアニメーション
172  const gridContainerSp = document.getElementById("gridContainer_sp");
173  const layerGradationSp = document.querySelector(".p-fv__layer-gradation_sp");
174
175  if (gridContainerSp && layerGradationSp) {
176    const cellSizeSp = 17;
177    const gapSp = 7;
178
179    const isSp = window.matchMedia("(max-width: 768px)").matches;
180    const containerWidthSp = isSp
181      ? (layerGradationSp.offsetWidth || gridContainerSp.offsetWidth || window.innerWidth)
182      : 375;
183    const widthRatioSp = containerWidthSp / 365;
184    const containerHeightSp = 582 * widthRatioSp;
185
186    const colsSp = Math.ceil(containerWidthSp / (cellSizeSp + gapSp)) + 1;
187    const rowsSp = Math.ceil(containerHeightSp / (cellSizeSp + gapSp));
188    const totalCellsSp = colsSp * rowsSp;
189
190    const fragmentSp = document.createDocumentFragment();
191
192    for (let i = 0; i < totalCellsSp; i++) {
193      const cell = document.createElement("div");
194      cell.classList.add("grid-cell");
195
196      const randomDelay = Math.random() * 16;
197      cell.style.animationDelay = `${randomDelay}s`;
198
199      const randomDuration = 6 + Math.random() * 16;
200      cell.style.animationDuration = `${randomDuration}s`;
201
202      fragmentSp.appendChild(cell);
203    }
204
205    gridContainerSp.appendChild(fragmentSp);
206  }
207});