https://withdom-architect.jp/wp-content/themes/WITHDOMarchitect/assets/js/important.js

1(function () {
2  // Clip-pathの追加
3  window.addEventListener('load', function () {
4    const images = document.querySelectorAll(".img-path-Right , .img-path-Left, .img-path-Top, .img-path-Bottom");
5    const options = {
6      rootMargin: "0px 0px -15%"
7    };
8    function check(entries) {
9      entries.forEach((entry) => {
10        if (entry.isIntersecting) {
11          entry.target.classList.add("is-visible");
12          imageObserver.unobserve(entry.target);
13        }
14      });
15    }
16    const imageObserver = new IntersectionObserver(check, options);
17    images.forEach((image) => imageObserver.observe(image));
18  });
19
20  // headerメニュー
21  // document.addEventListener('DOMContentLoaded', function () {
22  //   const menuBtn = document.querySelector('.header_right_btn');
23  //   const nav = document.getElementById('Nav');
24  //   const header = document.getElementById('Header');
25
26  //   if (!menuBtn || !nav || !header) {
27  //     console.error('Menu button, Nav or Header element not found.');
28  //     return;
29  //   }
30
31  //   function toggleMenu() {
32  //     const isExpanded = menuBtn.classList.toggle('active');
33  //     nav.classList.toggle('active');
34  //     header.classList.toggle('nav-open');
35
36  //     menuBtn.setAttribute('aria-expanded', isExpanded);
37  //     menuBtn.setAttribute('aria-label', isExpanded ? 'メニューを閉じる' : 'メニューを開く');
38
39  //     if (isExpanded) {
40  //       document.body.style.overflow = 'hidden';
41  //       document.body.style.position = 'fixed';
42  //       document.body.style.right = '0';
43  //       document.body.style.left = '0';
44  //     } else {
45  //       document.body.style.overflow = '';
46  //       document.body.style.position = '';
47  //       document.body.style.right = '';
48  //       document.body.style.left = '';
49  //     }
50  //   }
51
52  //   menuBtn.addEventListener('click', toggleMenu);
53
54  //   // ESCキーでメニューを閉じる
55  //   document.addEventListener('keydown', function (e) {
56  //     if (e.key === 'Escape' && nav.classList.contains('active')) {
57  //       toggleMenu();
58  //     }
59  //   });
60  // });
61
62
63  //ページトップ
64  $('#page-top').click(function () {
65    $('body,html').animate({
66      scrollTop: 0//ページトップまでスクロール
67    }, 500);//ページトップスクロールの速さ。数字が大きいほど遅くなる
68    return false;//リンク自体の無効化
69  });
70
71
72  document.addEventListener('DOMContentLoaded', function () {
73    const menuBtn = document.querySelector('.js-trigger-menu');
74    const navPC = document.getElementById('Nav');
75    const navSP = document.getElementById('Nav-sp');
76    const header = document.getElementById('Header');
77
78    if (!menuBtn || !navPC || !navSP || !header) {
79      console.error('Required elements not found.');
80      return;
81    }
82
83    function toggleMenu() {
84      const isExpanded = menuBtn.getAttribute('aria-expanded') === 'true';
85      const newExpandedState = !isExpanded;
86
87      menuBtn.classList.toggle('active');
88      header.classList.toggle('nav-open');
89
90      const currentNav = window.innerWidth <= 768 ? navSP : navPC;
91      currentNav.classList.toggle('active');
92
93      menuBtn.setAttribute('aria-expanded', newExpandedState);
94      menuBtn.setAttribute('aria-label', newExpandedState ? 'メニューを閉じる' : 'メニューを開く');
95
96      if (newExpandedState) {
97        document.body.style.overflow = 'hidden';
98        document.body.style.position = 'fixed';
99        document.body.style.width = '100%';
100      } else {
101        document.body.style.overflow = '';
102        document.body.style.position = '';
103        document.body.style.width = '';
104      }
105    }
106
107    menuBtn.addEventListener('click', toggleMenu);
108
109    // ESCキーでメニューを閉じる
110    document.addEventListener('keydown', function (e) {
111      if (e.key === 'Escape' && (navPC.classList.contains('active') || navSP.classList.contains('active'))) {
112        toggleMenu();
113      }
114    });
115
116    // リサイズ時にアクティブなナビゲーションを調整
117    window.addEventListener('resize', function () {
118      const isMenuOpen = navPC.classList.contains('active') || navSP.classList.contains('active');
119      if (isMenuOpen) {
120        navPC.classList.remove('active');
121        navSP.classList.remove('active');
122        const currentNav = window.innerWidth <= 768 ? navSP : navPC;
123        currentNav.classList.add('active');
124      }
125    });
126  });
127
128  // headerメニューhover時にメガメニュー表示
129  document.addEventListener('DOMContentLoaded', function () {
130    const megaMenuItems = document.querySelectorAll('.js-mega-menu');
131

132    megaMenuItems.forEach(function (item) {
133      const megaMenu = item.querySelector('.mega_menu');
134      const headerListLink = item.querySelector('.header_list_link');
135      let timeoutId;
136
137      // オリジナルのテキストを保存
138      if (headerListLink) {
139        headerListLink.setAttribute('data-original-text', headerListLink.textContent);
140      }
141
142      item.addEventListener('mouseenter', function () {
143        clearTimeout(timeoutId);
144        if (megaMenu) {
145          megaMenu.style.display = 'block';
146        }
147        if (headerListLink) {
148          headerListLink.classList.add('hover');
149          const hoverText = headerListLink.getAttribute('data-hover-text');
150          if (hoverText) {
151            headerListLink.textContent = hoverText;
152          }
153        }
154      });
155
156      item.addEventListener('mouseleave', function () {
157        timeoutId = setTimeout(function () {
158          if (megaMenu) {
159            megaMenu.style.display = 'none';
160          }
161          if (headerListLink) {
162            headerListLink.classList.remove('hover');
163            const originalText = headerListLink.getAttribute('data-original-text');
164            if (originalText) {
165              headerListLink.textContent = originalText;
166            }
167          }
168        }, 200); // 200ミリ秒の遅延を設定
169      });
170    });
171  });
172})();
173
174// 画像と見出しアニメーション
175document.addEventListener('DOMContentLoaded', function () {
176  const fadeupElements = document.querySelectorAll('.fadeup-element');
177
178  const observer = new IntersectionObserver((entries) => {
179    entries.forEach(entry => {
180      if (entry.isIntersecting) {
181        entry.target.classList.add('fadeup');
182        observer.unobserve(entry.target); // アニメーション後にオブザーバーを解除
183      }
184    });
185  }, {
186    threshold: 0.05 // 10%がビューポートに見えるときにトリガー
187  });
188
189  fadeupElements.forEach(element => {
190    observer.observe(element);
191  });
192});
193
194document.addEventListener('DOMContentLoaded', function () {
195  var accordions = document.querySelectorAll('.nav .accordion-toggle');
196
197  accordions.forEach(function (accordion) {
198    accordion.addEventListener('click', function (e) {
199      e.preventDefault();
200      this.classList.toggle('active');
201      var submenu = this.nextElementSibling;
202      if (submenu.style.display === 'block') {
203        submenu.style.display = 'none';
204      } else {
205        submenu.style.display = 'block';
206      }
207    });
208  });
209});
210
211
212window.onload = function () {
213  let timeline = anime.timeline({
214    targets: "#loadingAnime .cls-1",
215    direction: "normal",
216    loop: false
217  });
218
219  // 線画のアニメーション
220  timeline.add({
221    strokeDashoffset: [1000, 0],
222    easing: "easeInOutSine",
223    duration: 800,
224    delay: function (el, i) {
225      return i * 250;
226    }
227  });
228
229  // 塗りつぶしアニメーション
230  timeline.add({
231    easing: "easeInOutSine",
232    fill: ["transparent", "#ffffff"],
233    duration: 700
234  }, "-=200");
235
236  // アニメーションが終了した後にフェードアウト
237  timeline.finished.then(function () {
238    const loadingElement = document.querySelector('.loading');
239    loadingElement.classList.add('fade-out');
240
241    // 完全にフェードアウトした後にdisplay:noneを設定
242    loadingElement.addEventListener('transitionend', function () {
243      loadingElement.classList.add('hidden');
244      document.querySelector('.loadingAfterTxt').classList.add('show-text');
245    }, {
246      once: true
247    });
248  });
249};