https://www.nantatsu.co.jp//mt-static/support/theme_static/dc_nantatsu/js/script.js

1//animation
2Animon.animon();
3//loading
4//ページの読み込み完了時に処理を実行
5window.addEventListener("load", () => {
6  const loading = document.querySelector(".loading");
7  const loadingBG = document.querySelector(".loading__bg");
8  const loadingttlB = document.querySelector(".loading__img--black");
9  const loadingttlW = document.querySelector(".loading__img--white");
10  const mvElement = document.querySelector(".mv"); // mvクラスの存在を確認
11  let scrollPosition = 0;
12
13  if (mvElement) {
14    // mvクラスが存在する場合のみ実行
15    // スクロール位置を固定して禁止
16    window.scrollTo(0, 0); // mvクラスがある場合だけトップに戻す
17    const disableScroll = (e) => {
18      e.preventDefault(); // スクロール動作を無効化
19    };
20
21    // スクロールイベントを無効化
22    window.addEventListener("touchmove", disableScroll, { passive: false });
23    window.addEventListener("wheel", disableScroll, { passive: false });
24
25    // ローディング表示に関連するクラス操作
26    document.body.classList.add("loaded");
27    setTimeout(() => {
28      loadingBG.classList.add("loaded");
29    }, 2000);
30    setTimeout(() => {
31      loadingttlB.classList.add("loaded");
32    }, 2000);
33    setTimeout(() => {
34      loading.classList.add("loaded");
35    }, 4000);
36    setTimeout(() => {
37      loadingttlW.classList.add("loaded");
38    }, 4000);
39
40    // 4秒後にスクロール解除
41    setTimeout(() => {
42      window.removeEventListener("touchmove", disableScroll);
43      window.removeEventListener("wheel", disableScroll);
44      document.body.style.position = "";
45      document.body.style.top = "";
46      window.scrollTo(0, scrollPosition); // スクロール位置をリセット
47    }, 4000);
48  }
49});
50
51//loading-anniv
52//ページの読み込み完了時に処理を実行
53window.addEventListener("load", () => {
54  const loadingAnniv = document.querySelector(".loading-anniv");
55  const loadingAnnivImg = document.querySelector(".loading-anniv__fig");
56  const AnnivElement = document.querySelector(".anniv"); // annivクラスの存在を確認
57  let scrollPosition = 0;
58
59  if (AnnivElement) {
60    // annivクラスが存在する場合のみ実行
61    // スクロール位置を固定して禁止
62    window.scrollTo(0, 0); // mvクラスがある場合だけトップに戻す
63    const disableScroll = (e) => {
64      e.preventDefault(); // スクロール動作を無効化
65    };
66
67    // スクロールイベントを無効化
68    window.addEventListener("touchmove", disableScroll, { passive: false });
69    window.addEventListener("wheel", disableScroll, { passive: false });
70
71    // ローディング表示に関連するクラス操作
72    document.body.classList.add("loaded");
73    // setTimeout(() => {
74    //   loadingAnnivBG.classList.add("loaded");
75    // }, 4000);
76    setTimeout(() => {
77      loadingAnnivImg.classList.add("loaded");
78    }, 1000);
79    setTimeout(() => {
80      loadingAnniv.classList.add("loaded");
81    }, 1500);
82
83    // 4秒後にスクロール解除
84    setTimeout(() => {
85      window.removeEventListener("touchmove", disableScroll);
86      window.removeEventListener("wheel", disableScroll);
87      document.body.style.position = "";
88      document.body.style.top = "";
89      window.scrollTo(0, scrollPosition); // スクロール位置をリセット
90    }, 1500);
91  }
92});
93
94$(function () {
95  //popup表示・非表示
96  $(window).on("scroll", function () {
97    const mv = $(".mv"); // トリガーとなる要素
98    const popupWrapper = $(".popup__wrapper"); // 表示/非表示する要素
99    const popup = $(".popup"); // 表示/非表示する要素
100    const footer = $(".recruit");
101
102    // フッター位置の取得（要素がない場合はデフォルト値）
103    const footerPosition = footer.length > 0 ? footer.offset().top - 500 : Infinity;
104    const windowScroll = $(window).scrollTop();
105    let shouldDisplay = false;
106
107    // トップページの`.mv`が存在する場合の処理
108    if (mv.length > 0) {
109      const mvPosition = mv.offset().top + mv.outerHeight() - 500; // `.mv` の下端位置
110      if (windowScroll > mvPosition && windowScroll < footerPosition) {
111        shouldDisplay = true;
112      }
113    }
114
115    // 下層ページの`.sub-mv`が存在する場合の処理
116    // if (subMv.length > 0) {
117    //   const subMvPosition = subMv.offset().top + subMv.outerHeight(); // `.sub-mv` の下端位置
118    //   if (windowScroll > subMvPosition && windowScroll < footerPosition) {
119    //     shouldDisplay = true;
120    //   }
121    // }
122
123    // 表示/非表示の切り替え
124    // `.popup` の存在確認
125    if (popup.length > 0) {
126      if (shouldDisplay) {
127        popup.addClass("is-visible");
128        popupWrapper.addClass("is-visible");
129      } else {
130        popup.removeClass("is-visible");
131        popupWrapper.removeClass("is-visible");
132      }
133    }
134  });
135
136  $(document).on("click", ".popup__close", function () {
137    $(this).closest(".popup").fadeOut(150); // フェードアウトして非表示に
138  });
139
140  //accordion
141  $(".dc_accordion__ttl").click(function () {
142    $(this).children(".dc_accordion__icon").toggleClass("is-active");
143    $(this).toggleClass("is-active");
144    $(this).siblings(".dc_accordion__inner").slideToggle();
145  });
146});
147
148//company文字アニメーション
149
150document.addEventListener("DOMContentLoaded", function () {
151  const fontLoopAnimation = document.querySelector("#font-loop-animation");
152
153  if (fontLoopAnimation) {

154    // #font-loop-animation が存在する場合のみ処理を実行
155    let lastScrollTop = 0;
156    let currentX = 0;
157    const resetThreshold = -$("#font-loop-animation").width() / 2;
158
159    $(window).on("scroll", function () {
160      const scrollTop = $(this).scrollTop();
161      const delta = scrollTop - lastScrollTop;
162
163      if (Math.abs(delta) > 2) {
164        const direction = delta > 0 ? -1 : 1;
165        currentX += direction * 10;
166
167        // ループ処理
168        if (currentX < resetThreshold) {
169          currentX = resetThreshold; // スライドアウトしすぎを防ぐ
170        } else if (currentX > 0) {
171          currentX = 0; // 0に戻す
172        }
173
174        gsap.set("#font-loop-animation", {
175          x: currentX,
176        });
177
178        lastScrollTop = scrollTop;
179      }
180    });
181  } else {
182  }
183});
184
185//tab切り替え（プロジェクト紹介ページ、沿革ページ）
186// let tabs = $(".dc_tab-swich");
187// $(".dc_tab-swich").on("click", function () {
188//   $(".active").removeClass("active");
189//   $(this).addClass("active");
190//   const index = tabs.index(this);
191//   $(".dc_tab-content").removeClass("show").eq(index).addClass("show");
192// });
193
194//tabにリンク（沿革ページ）
195//tab切り替え（プロジェクト紹介ページ,沿革ページ）
196//tab切り替え（プロジェクト紹介ページ）
197let tabs = $(".dc_tab-swich");
198
199function activateTab(index) {
200  $(".active").removeClass("active");
201  tabs.eq(index).addClass("active");
202  $(".dc_tab-content").removeClass("show").eq(index).addClass("show");
203}
204
205// クリックしたとき
206tabs.on("click", function () {
207  const index = tabs.index(this);
208  activateTab(index);
209});
210
211// タブ1からタブ2に飛ぶリンク（クリック時のみ上に戻る）
212$(".goto-tab2").on("click", function (e) {
213  e.preventDefault();
214  activateTab(1); // ←タブ2は0から数えて「1」
215
216  // 上に戻る処理（ここだけ）
217  $("html, body").animate({ scrollTop: 0 }, 400);
218});
219

220//swiper
221
222// 元のスライド数を正確に取得（loopによる複製スライドを除外）
223const slideCount = document.querySelectorAll(".swiper--work .swiper-slide:not(.swiper-slide-duplicate)").length;
224
225// ウィンドウ幅判定
226const isDesktop = window.innerWidth >= 1024;
227
228// 1024px以上でスライド5枚以下 → autoplay・loopを無効化
229const shouldAutoplay = !(isDesktop && slideCount <= 11); //オートプレイするスライド枚数指定
230const shouldLoop = !(isDesktop && slideCount <= 11); //ループするスライド枚数指定
231
232// Swiper 初期化
233const mySwiperwork = new Swiper(".swiper--work", {
234  slidesPerView: 1,
235  spaceBetween: 24,
236  centeredSlides: true,
237  loop: shouldLoop,
238  speed: 1500,
239  autoplay: shouldAutoplay
240    ? {
241        delay: 3000,
242        disableOnInteraction: false,
243      }
244    : false,
245  loopAdditionalSlides: 2,
246  grabCursor: true,
247
248  pagination: {
249    el: ".swiper-pagination",
250    clickable: true,
251    type: "bullets",
252  },
253
254  navigation: {
255    nextEl: ".swiper-button-next",
256    prevEl: ".swiper-button-prev",
257  },
258
259  breakpoints: {
260    1024: {
261      slidesPerView: 3,
262      spaceBetween: 27,
263      centeredSlides: false,
264    },
265  },
266});
267
268const mySwipersubwork = new Swiper(".swiper--sub-work", {
269  slidesPerView: 1, // コンテナ内に表示させるスライド数（CSSでサイズ指定する場合は 'auto'）
270  spaceBetween: 24, // スライド間の余白（px）
271  //centeredSlides: true, // アクティブなスライドを中央に配置する
272
273  loop: true, // ループさせる
274
275  grabCursor: true, // PCでマウスカーソルを「掴む」マークにする
276  watchSlidesProgress: true, // スライドの進行状況を監視する
277
278  pagination: {
279    el: ".swiper-pagination", // ページネーション要素のクラス
280    clickable: true, // クリックによるスライド切り替えを有効にする
281    type: "bullets", // 'bullets'（デフォルト） | 'fraction' | 'progressbar'
282  },
283
284  navigation: {
285    nextEl: ".swiper-button-next", // 「次へ」ボタン要素のクラス
286    prevEl: ".swiper-button-prev", // 「前へ」ボタン要素のクラス
287  },
288
289  scrollbar: {
290    el: ".swiper-scrollbar", // スクロールバー要素のクラス
291  },
292
293  //watchSlidesProgress: true,
294});
295
296const mySwipersubworkS_thumb = new Swiper(".swiper--sub-work-single__thumb", {
297  slidesPerView: "auto", // コンテナ内に表示させるスライド数（CSSでサイズ指定する場合は 'auto'）
298  //spaceBetween: 8, // スライド間の余白（px）
299  //centeredSlides: false, // アクティブなスライドを中央に配置する
300
301  loop: true, // ループさせる
302});
303
304const mySwipersubworkS = new Swiper(".swiper--sub-work-single", {
305  slidesPerView: 1, // コンテナ内に表示させるスライド数（CSSでサイズ指定する場合は 'auto'）
306  spaceBetween: 0, // スライド間の余白（px）
307  //centeredSlides: true, // アクティブなスライドを中央に配置する
308
309  thumbs: {
310    swiper: mySwipersubworkS_thumb,
311  },
312
313  loop: true, // ループさせる
314
315  grabCursor: true, // PCでマウスカーソルを「掴む」マークにする
316  watchSlidesProgress: true, // スライドの進行状況を監視する
317
318  navigation: {
319    nextEl: ".swiper-button-next", // 「次へ」ボタン要素のクラス
320    prevEl: ".swiper-button-prev", // 「前へ」ボタン要素のクラス
321  },
322});
323
324// スライドの枚数が1枚の場合のみ矢印を非表示にする
325if (mySwipersubworkS.slides.length === 1) {
326  document.querySelector(mySwipersubworkS.params.navigation.nextEl).style.display = "none";
327  document.querySelector(mySwipersubworkS.params.navigation.prevEl).style.display = "none";
328  document.querySelector(".sub-work-single-thumb__slider").style.display = "none";
329  document.querySelector(".sub-work-single-thumb__arrows").style.display = "none";
330}
331
332const mySwiperpickMV = new Swiper(".mv-slider", {
333  slidesPerView: 2,
334  slidesPerGroup: 1,
335
336  loop: true, // ループさせる
337  speed: 1500, // 少しゆっくり(デフォルトは300)
338  autoplay: {
339    //自動再生
340    delay: 3000, // 3秒後に次のスライド
341    disableOnInteraction: false, // ユーザー操作後も再生を続ける
342  },
343
344  direction: "vertical", // デフォルトは横方向
345  breakpoints: {
346    840: {
347      // 画面幅が768px以下の場合
348      direction: "horizontal", // 縦スライド
349    },
350  },
351
352  grabCursor: true, // PCでマウスカーソルを「掴む」マークにする
353  watchSlidesProgress: true, // スライドの進行状況を監視する
354
355  pagination: {
356    el: ".swiper-pagination", // ページネーション要素のクラス
357    clickable: true, // クリックによるスライド切り替えを有効にする
358    type: "bullets", // 'bullets'（デフォルト） | 'fraction' | 'progressbar'
359  },
360
361  navigation: {
362    nextEl: ".swiper-button-next", // 「次へ」ボタン要素のクラス
363    prevEl: ".swiper-button-prev", // 「前へ」ボタン要素のクラス
364  },
365
366  on: {
367    init: function () {
368      const autoplay = this.params.autoplay;
369      this.autoplay.stop(); // 初期再生を停止
370      setTimeout(() => {
371        this.autoplay.start(); // 指定時間後に再開
372      }, 2000); // 最初のスライド遅延時間
373    },
374  },
375});
376
377// const mySwiperpickMVTEST = new Swiper(".mv-slider-test", {
378//   slidesPerView: 2,
379//   slidesPerGroup: 1,
380
381//   loop: true, // ループさせる
382//   speed: 1500, // 少しゆっくり(デフォルトは300)
383//   autoplay: {
384//     // 自動再生
385//     delay: 3000, // 3秒後に次のスライド
386//     disableOnInteraction: false, // ユーザー操作後も再生を続ける
387//   },
388
389//   direction: "vertical", // デフォルトは横方向
390//   breakpoints: {
391//     560: {
392//       // 画面幅が768px以下の場合
393//       direction: "horizontal", // 縦スライド
394//     },
395//   },
396
397//   grabCursor: true, // PCでマウスカーソルを「掴む」マークにする
398//   watchSlidesProgress: true, // スライドの進行状況を監視する
399
400//   pagination: {
401//     el: ".swiper-pagination", // ページネーション要素のクラス
402//     clickable: true, // クリックによるスライド切り替えを有効にする
403//     type: "bullets", // 'bullets'（デフォルト） | 'fraction' | 'progressbar'
404//   },
405
406//   navigation: {
407//     nextEl: ".swiper-button-next", // 「次へ」ボタン要素のクラス
408//     prevEl: ".swiper-button-prev", // 「前へ」ボタン要素のクラス
409//   },
410
411//   on: {
412//     init: function () {
413//       const autoplay = this.params.autoplay;
414//       this.autoplay.stop(); // 初期再生を停止
415//       setTimeout(() => {
416//         this.autoplay.start(); // 指定時間後に再開
417//       }, 2000); // 最初のスライド遅延時間
418//     },
419//   },
420// });
421
422document.addEventListener("DOMContentLoaded", function () {
423  const selectBox = document.querySelector(".dc_select");
424  if (selectBox) {
425    // 要素が存在するページだけ処理を実行
426    selectBox.addEventListener("click", function () {
427      const isActive = this.classList.contains("is-active");
428      if (isActive) {
429        this.classList.remove("is-active");
430      } else {
431        this.classList.add("is-active");
432      }
433    });

434  }
435});
436
437// ランダムに配列をシャッフルする関数
438function shuffle(array) {
439  for (let i = array.length - 1; i > 0; i--) {
440    const j = Math.floor(Math.random() * (i + 1));
441    [array[i], array[j]] = [array[j], array[i]];
442  }
443  return array;
444}
445
446// 各 <figure> 内の <img> をランダムに並べ替える関数
447function randomizeFigures() {
448  const figures = document.querySelectorAll(".anniv-mv__pic__figgroup"); // すべての <figure> を取得
449  const figuresLists = document.querySelectorAll(".anniv-mv__pic__list"); // すべての <figure> を取得
450
451  figures.forEach((figure) => {
452    const images = Array.from(figure.querySelectorAll("img")); // 各 <figure> 内の <img> を取得
453    const shuffledImages = shuffle(images); // 取得した <img> をシャッフル
454    figure.innerHTML = ""; // <figure> の中身をクリア
455    shuffledImages.forEach((img) => figure.appendChild(img)); // シャッフルされた順番で再配置
456  });
457  figuresLists.forEach((figureList) => {
458    const listimages = Array.from(figureList.querySelectorAll(".anniv-mv__pic__figgroup")); // 各 <figure> 内の <img> を取得
459    const shuffledImages = shuffle(listimages); // 取得した <img> をシャッフル
460    figureList.innerHTML = ""; // <figure> の中身をクリア
461    shuffledImages.forEach((listimage) => figureList.appendChild(listimage)); // シャッフルされた順番で再配置
462  });
463
464  // // すべての画像リストを取得
465  // const picLists = document.querySelectorAll(".anniv-mv__pic__list");
466
467  // // 各リストに対して処理を実行
468  // picLists.forEach((originalList) => {
469  //   // リストを複製
470  //   const clonedList = originalList.cloneNode(true);
471
472  //   // クローンしたリストをDOMに追加
473  //   originalList.parentNode.appendChild(clonedList);
474  // });
475  // // クローンしたリストに初期位置を設定
476  // clonedList.style.transform = "translateX(100%)";
477}
478
479// ページ読み込み時に実行
480window.onload = randomizeFigures;