https://www.smartboarding.net/change/main.js

1// -----------------------------------------------
2// フローティングボタン
3// -----------------------------------------------
4document.addEventListener("DOMContentLoaded", function () {
5  var floatingContents = document.querySelector(".floatingContents");
6  var closeButton = document.querySelector(".close-btn");
7
8  floatingContents.classList.add("show");
9
10  closeButton.addEventListener("click", function () {
11    floatingContents.style.opacity = "0";
12    floatingContents.style.left = "-300px";
13  });
14});
15// -----------------------------------------------
16// FV - 詳しく見る
17// -----------------------------------------------
18// const fvScheduleLink = document.querySelector(
19//   ".first-view__schedule--detail a"
20// );
21// const mediaQuery = window.matchMedia("(min-width: 768px)");
22
23// function checkWindow(windowSize) {
24//   if (windowSize.matches) {
25//     console.log("PC");
26//     fvScheduleLink.innerText = "詳しく見る";
27//   } else {
28//     console.log("sp");
29//     fvScheduleLink.innerText = "";
30//   }
31// }
32// checkWindow(mediaQuery);
33// mediaQuery.addEventListener("change", checkWindow);
34// -----------------------------------------------
35// ScrollHint
36// -----------------------------------------------
37new ScrollHint(".js-scrollable", {
38  scrollHintIconAppendClass: "scroll-hint-icon-black",
39  suggestiveShadow: false,
40  i18n: {
41    scrollable: "横にスクロールしてください",
42  },
43});
44// -----------------------------------------------
45// ハンバーガーメニュー
46// -----------------------------------------------
47
48// body
49const body = document.body;
50// ハンバーガーメニューボタン
51const hamburgerMenu = document.querySelectorAll(".hamburger");
52// メニューのnav
53const navMenu = document.querySelectorAll(".header__menu--inner");
54// メニューのアイテムひとつ
55const topHeaderItem = document.querySelectorAll(".header__item");
56// ヘッダー
57const headerInner = document.querySelectorAll(".header__inner");
58
59// ハンバーガーメニューを開く
60hamburgerMenu.forEach(function (menu) {
61  menu.addEventListener("click", function () {
62    // クリックされたらメニュー内容が表示されるように
63    navMenu.forEach(function (nav) {
64      nav.classList.toggle("active");
65      // 背景固定
66      body.classList.toggle("no-scroll");
67      // メニューのリンクがクリックされたらバツボタンが出るように
68      menu.classList.toggle("active");
69      // ヘッダーの角丸を薄くする
70      headerInner.classList.toggle("aiueo");
71    });
72  });
73});
74
75// ハンバーガーメニューを閉じる
76topHeaderItem.forEach(function (item) {
77  item.addEventListener("click", function () {
78    // メニューがクリックされたら閉じる
79    navMenu.forEach(function (nav) {
80      nav.classList.remove("active");
81      // 背景固定解除
82      body.classList.remove("no-scroll");
83    });
84    // ハンバーガーアイコンを元に戻す
85    hamburgerMenu.forEach(function (menu) {
86      menu.classList.remove("active");
87    });
88  });
89});
90
91// ハンバーガーメニューを開いている間、背景をスクロールさせない
92window.addEventListener("resize", function () {
93  if (window.innerWidth >= 1280) {
94    // 画面幅が1280px以上になった場合
95    navMenu.forEach(function (nav) {
96      nav.classList.remove("active");
97    });
98    body.classList.remove("no-scroll");
99    hamburgerMenu.forEach(function (menu) {
100      menu.classList.remove("active");
101    });
102  }
103});
104
105// -----------------------------------------------
106// 画面上部に戻るボタン
107// -----------------------------------------------
108const pageTopBtn = document.querySelector(".page-top");
109// 丸いボタンがクリックされたら
110pageTopBtn.addEventListener("click", scroll_top);
111// TOPへ移動
112function scroll_top() {
113  window.scroll({ top: 0, behavior: "smooth" });
114}
115// アンカーリンク・TOPへ戻るボタンのためのスムーズなスクロール
116const smoothScrollTrigger = document.querySelectorAll('a[href^="#"]');
117for (let i = 0; i < smoothScrollTrigger.length; i++) {
118  smoothScrollTrigger[i].addEventListener("click", (e) => {
119    e.preventDefault();
120    let href = smoothScrollTrigger[i].getAttribute("href");
121    let targetElement = document.getElementById(href.replace("#", ""));
122    const rect = targetElement.getBoundingClientRect().top;
123    const offset = window.pageYOffset;
124    const gap = 100;
125    const target = rect + offset - gap;
126    window.scrollTo({
127      top: target,
128      behavior: "smooth",
129    });
130  });
131}
132
133// -----------------------------------------------
134// モーダル
135// -----------------------------------------------
136// ダイアログ要素
137const modal = document.querySelector("dialog");
138// ダイアログを開くボタン（水色）
139const dialogOpenButtons = document.querySelectorAll(".js-dialog-open");
140// ダイアログを閉じるボタン（ピンク）
141const dialogCloseButtons = document.querySelectorAll(".js-dialog-close");
142// 水色のボタンが押されたら、ダイアログを開く。背景をスクロールさせない
143dialogOpenButtons.forEach((button) => {
144  const dialog = document.querySelector(button.dataset.dialog);
145  button.addEventListener("click", () => {
146    dialog.showModal();
147    body.style.overflow = "hidden";
148  });
149});
150// 閉じるボタンでダイアログを閉じる、背景をスクロールさせられるようにする
151dialogCloseButtons.forEach((button) => {
152  const dialog = button.closest("dialog");
153  button.addEventListener("click", () => {
154    dialog.close();
155    body.style.overflow = "visible";
156  });
157});
158// モーダルの外の黒い部分を押されたらダイアログを閉じる、背景をスクロールさせられるようにする
159const modals = document.querySelectorAll(".dialog__open--inner");

160modals.forEach((modal) => {
161  modal.addEventListener("click", (event) => {
162    if (!event.target.closest(".dialog_inner")) {
163      modal.close();
164      body.style.overflow = "visible";
165    }
166  });
167});
168
169// // エスケープキーを押されたら背景をスクロールさせられるようにする
170modals.forEach((modal) => {
171  modal.addEventListener("keydown", function (e) {
172    if (e.key === "Escape") {
173      body.style.overflow = "visible";
174    }
175  });
176});
177// -----------------------------------------------
178// スクロールしたら文字が左から右に入ってくる
179// -----------------------------------------------
180const observerLeft = new IntersectionObserver((entries) => {
181  entries.forEach((left) => {
182    if (left.isIntersecting) {
183      left.target.classList.add("active");
184      observer.unobserve(left.target);
185    }
186  });
187});
188// 左からフェードインする要素を取得
189const fadeInLeft = document.querySelectorAll(".load-slide-left");
190fadeInLeft.forEach((element) => {
191  observerLeft.observe(element);
192});
193// -----------------------------------------------
194// スクロールしたら文字が跳ねる
195// -----------------------------------------------
196const observerOptions = {
197  root: null,
198  rootMargin: "0px 0px -100px 0px",
199  threshold: 0,
200};
201const observer = new IntersectionObserver((entries) => {
202  entries.forEach((entry) => {
203    if (entry.isIntersecting) {
204      // data-animation属性を設定
205      entry.target.setAttribute("data-animation", "after");
206
207      // 対象の要素内の文字に遅延を設定
208      const chars = entry.target.querySelectorAll(".bounce-title-char");
209      chars.forEach((char, index) => {
210        const delay = 0.1 + index * 0.03;
211        char.style.animationDelay = `${delay}s`;
212      });
213
214      // 監視を解除
215      observer.unobserve(entry.target);
216    }
217  });
218}, observerOptions);
219
220// 監視対象を取得して設定
221const bounceTitles = document.querySelectorAll(".bounce-title");

222bounceTitles.forEach((title) => {
223  observer.observe(title);
224});
225// const observer = new IntersectionObserver((entries) => {
226//   entries.forEach((entry) => {
227//     if (entry.isIntersecting) {
228//       // 要素がビューポートに入ったらdata-animation属性を"after"にする
229//       entry.target.setAttribute("data-animation", "after");
230//       observer.unobserve(entry.target); // アニメーションが一度だけ実行されるように監視を解除
231//     }
232//   });
233// });
234// // 監視したい要素を取得
235// const bounceTitle = document.querySelectorAll(".bounce-title");
236// bounceTitle.forEach((title) => {
237//   observer.observe(title); // 各要素を監視
238// });
239
240// // 各文字に対して順番にアニメーション遅延を適用
241// const chars = document.querySelectorAll(".bounce-title-char");
242// chars.forEach((char, index) => {
243//   const delay = 0.4 + index * 0.15; // 遅延を0.4秒から始めて、0.15秒ずつ増加
244//   char.style.animationDelay = `${delay}s`;
245// });
246
247// -----------------------------------------------
248// フェードインアニメーション（ページが読み込まれたらフェードイン）
249// -----------------------------------------------
250const loadElements = document.querySelectorAll(".load-fade-in");
251loadElements.forEach((element) => {
252  element.style.opacity = "0";
253  element.style.transition = "opacity 1s ease-in-out";
254});
255
256window.addEventListener("load", function () {
257  loadElements.forEach((element) => {
258    element.style.opacity = "1";
259  });
260});
261
262// -----------------------------------------------
263// フェードインアニメーション（スクロールで画面内に入ったらフェードイン）
264// -----------------------------------------------
265let fadeInTarget = document.querySelectorAll(".fade-in");
266window.addEventListener("scroll", () => {
267  for (let i = 0; i < fadeInTarget.length; i++) {
268    const rect = fadeInTarget[i].getBoundingClientRect().top;
269    const scroll = window.pageYOffset || document.documentElement.scrollTop;
270    const offset = rect + scroll;
271    const windowHeight = window.innerHeight;
272    if (scroll > offset - windowHeight + 150) {
273      fadeInTarget[i].classList.add("scroll-in");
274    }
275  }
276});
277
278AOS.init();