https://www.rsk.co.jp/rsk_app/js/main.js

1/* svg animation */
2// html
3// <div class="svg-loader" data-src="./img/main_copy.svg"></div>
4
5// 外部SVGファイルを読み込んでインライン展開する関数
6// async function loadSVG() {
7//   const containers = document.querySelectorAll(".svg-loader");
8
9//   if (containers.length === 0) {
10//     startTitleObserver();
11//     return;
12//   }
13
14//   // awaitを使うために、通常のforEachではなく for...of ループを使います
15//   for (const container of containers) {
16//     const svgUrl = container.getAttribute("data-src");
17//     if (!svgUrl) continue; // URLが空ならスキップ
18
19//     try {
20//       const response = await fetch(svgUrl);
21//       if (!response.ok) {
22//         throw new Error(`データの読み込みに失敗しました: ${response.status}`);
23//       }
24
25//       const svgText = await response.text();
26
27//       container.innerHTML = svgText;
28
29//       container.querySelectorAll(".draw-line").forEach((path) => {
30//         const length = path.getTotalLength();
31//         const buffer = 0;
32//         path.style.strokeDasharray = length + buffer;
33//         path.style.strokeDashoffset = length + buffer;
34//       });
35//     } catch (error) {
36//       console.error(error);
37//     }
38//   }
39//   startTitleObserver();
40// }
41
42// // 既存のIntersectionObserverロジック（関数としてカプセル化）
43// function startTitleObserver() {
44//   const options = {
45//     root: null,
46//     rootMargin: "0px",
47//     threshold: 0.2,
48//   };
49
50//   const scrollAnimationObserver = new IntersectionObserver((entries, obs) => {

51//     entries.forEach((entry) => {
52//       if (entry.isIntersecting) {
53//         // カスタムプロパティの付与
54//         const lines = entry.target.querySelectorAll(
55//           ".draw-line, .copy-text, .dot , .download",
56//         );
57//         lines.forEach((line, index) => {
58//           line.style.setProperty("--i", index + 5);
59//         });
60
61//         // activeクラスの付与
62//         entry.target.classList.add("active");
63
64//         // RSKアプリについての「ついて」の表示
65//         const animeLastEl = document.querySelector(".animelast");
66//         if (animeLastEl) {
67//           animeLastEl.addEventListener(
68//             "animationend",
69//             () => {
70//               const aboutText = entry.target.querySelector(".about-text");
71//               if (aboutText) aboutText.classList.add("active");
72//             },
73//             { once: true },
74//           );
75//         }
76
77//         obs.unobserve(entry.target);
78//       }
79//     });
80//   }, options);
81
82//   const scrollElements = document.querySelectorAll("h1, .jp-title , section");
83//   scrollElements.forEach((el) => {
84//     scrollAnimationObserver.observe(el);
85//     const rect = el.getBoundingClientRect();
86//     if (rect.top < window.innerHeight) {
87//       // ページ読み込み時に、すでに画面内にある要素に対してactiveを付与する
88//       el.classList.add("active");
89//     }
90//   });
91// }
92// // 画面の読み込み完了時に実行
93// document.addEventListener("DOMContentLoaded", loadSVG);
94/* /svg animation */
95
96const options = {
97  root: null,
98  rootMargin: "0px",
99  threshold: 0.2,
100};
101
102const scrollAnimationObserver = new IntersectionObserver((entries, obs) => {
103  entries.forEach((entry) => {
104    if (entry.isIntersecting) {
105      // activeクラスの付与
106      entry.target.classList.add("active");
107      obs.unobserve(entry.target);
108    }
109  });
110}, options);
111
112const scrollElements = document.querySelectorAll("section");
113
114scrollElements.forEach((el) => {
115  scrollAnimationObserver.observe(el);

116  const rect = el.getBoundingClientRect();
117  if (rect.top < window.innerHeight) {
118    // ページ読み込み時に、すでに画面内にある要素に対してactiveを付与する
119    el.classList.add("active");
120  }
121});
122
123////////////////////////////////
124let resizeTimer;
125window.addEventListener("resize", () => {
126  document.body.classList.add("is-resizing");
127
128  clearTimeout(resizeTimer);
129  resizeTimer = setTimeout(() => {
130    document.body.classList.remove("is-resizing");
131  }, 200);
132});