https://wakuwaku-house.com/renewal2024/wp-content/themes/wakuwaku/js/base.js?1750829171

1/* ==========================================================================//
2//
3// ヘッダーの処理
4//
5// ========================================================================== */
6document.addEventListener('DOMContentLoaded', function () {
7	const header = document.querySelector('.header');
8	const menuTrigger = document.querySelector('.menu-trigger');
9	const g_nav = document.getElementById('gnavi');
10	menuTrigger.addEventListener('click', function (event) {
11		event.preventDefault();
12		header.classList.toggle('active');
13		menuTrigger.classList.toggle('active');
14		if (g_nav.classList.contains('active')) {
15			g_nav.classList.remove('active');
16		} else {
17			g_nav.classList.add('active');
18		}
19	});
20	window.addEventListener('scroll', function() {
21		var scroll = window.scrollY || window.pageYOffset;
22		if (scroll > 200) {
23			header.classList.add('js_scroll');
24		} else {
25			header.classList.remove('js_scroll');
26		}
27	});
28	if( window.matchMedia("(max-width: 767px)").matches ){
29		$('.has_child').on('click', function(){
30			$(this).find('ul').slideToggle();
31		});
32	}
33});
34
35/* ==========================================================================//
36//
37// Slider
38//
39// ========================================================================== */
40document.addEventListener('DOMContentLoaded', function () {
41	/* TOPのスライド
42	---------------------------------------------------------- */
43	if( document.querySelector('.main_visual') ){
44		/* メインビジュアルのスライド */
45		const mvSlide = new Swiper('.mv__image', {
46			loop: true,
47			autoplay: {
48				delay: 3000
49			},
50			speed: 2000,
51			effect: 'fade',
52			fadeEffect: {
53				crossFade: true
54			},
55			pagination: {
56				el: '.main_visual .swiper-pagination',
57				clickable: true
58			}
59		});
60		/* 動画のスライド */
61		const movieSlide = new Swiper('.movie_slide', {
62			loop: true,
63			speed: 1000,
64			slidesPerView: 1,
65			spaceBetween: 20,
66			navigation: {
67				nextEl: '.top_movie .swiper-button-circle-next',
68				prevEl: '.top_movie .swiper-button-circle-prev',
69			},
70			breakpoints: {
71				767: {
72					slidesPerView: 2.25,
73					spaceBetween: 30,
74				}
75			}
76		});
77		/* お客様の声スライド */
78		const voiceSlide = new Swiper('.top_voice_slide', {
79			loop: true,
80			speed: 1000,
81			slidesPerView: 1,
82			spaceBetween: 40,
83			navigation: {
84				nextEl: '.top_voice .swiper-button-circle-next',
85				prevEl: '.top_voice .swiper-button-circle-prev',
86			},
87			breakpoints: {
88				767: {
89					slidesPerView: 3,
90					spaceBetween: 50,
91				}
92			}
93		});
94	}
95	/* 施工事例の共通スライド
96	---------------------------------------------------------- */
97	if( document.querySelector('.case_slide') ){
98		const caseSlide = new Swiper('.case_slide', {
99			autoplay: {
100				delay: 0
101			},
102			loop: true,
103			speed: 8000,
104			slidesPerView: 1,
105			centeredSlides : true,
106			preventInteractionOnTransition: true,
107			spaceBetween: 40,
108			breakpoints: {
109				767: {
110					slidesPerView: 4,
111					spaceBetween: 30,
112				}
113			}
114		});
115	}
116	/* セミナー参加者の声スライド
117	---------------------------------------------------------- */
118	if( document.querySelector('.voice_slide') ){
119		/* 動画のスライド */
120		const movieSlide = new Swiper('.voice_slide', {
121			loop: true,
122			speed: 1000,
123			slidesPerView: 1,
124			spaceBetween: 20,
125			navigation: {
126				nextEl: '.voice_slide .swiper-button-circle-next',
127				prevEl: '.voice_slide .swiper-button-circle-prev',
128			},
129			breakpoints: {
130				767: {
131					slidesPerView: 2.35,
132					spaceBetween: 30,
133				}
134			}
135		});
136	}
137	/* モデルハウスのスライド
138	---------------------------------------------------------- */
139	if( document.querySelector('.point_slide') ){
140		const modelSlide = new Swiper('.swiper', {
141			loop: true,
142			speed: 1000,
143			slidesPerView: 1.5,
144			spaceBetween: 40,
145			centeredSlides: true,
146			navigation: {
147				nextEl: '.point_slide .swiper-button-circle-next',
148				prevEl: '.point_slide .swiper-button-circle-prev',
149			},
150			breakpoints: {
151				767: {
152					slidesPerView: 2.35,
153					spaceBetween: 50,
154					centeredSlides: false
155				}
156			}
157		});
158	}
159});
160
161/* topのスマホスライド
162---------------------------------------------------------- */
163if( document.querySelector('.top_sp_slide') ){
164		const topSpSwiper = new Swiper('.top_sp_slide', {
165			loop: true,
166			speed: 1000,
167			slidesPerView: 1,
168			autoplay: {
169				delay: 4000,
170				disableOnInteraction: false,
171			},
172			spaceBetween: 40,
173			navigation: {
174				nextEl: '.top_event .swiper-button-next',
175				prevEl: '.top_event .swiper-button-prev',
176			},
177			breakpoints: {
178				768: {
179					slidesPerView: 3,
180				}
181			}
182		});
183	// const breakPoint = 767;
184	// let swiper;
185	// let swiperBool;
186	// window.addEventListener(
187	// 	"load",
188	// 	() => {
189	// 		// if (breakPoint < window.innerWidth) {
190	// 		// 	swiperBool = false;

191	// 		// } else {
192	// 			createSwiper();
193	// 			swiperBool = true;
194	// 		// }
195	// 	},
196	// 	false
197	// );
198	// window.addEventListener(
199	// 	"resize",
200	// 	() => {
201	// 		// if (breakPoint < window.innerWidth && swiperBool) {
202	// 		// 	topSpSwiper.destroy(false, true);
203	// 		// 	swiperBool = false;
204	// 		// } else if (breakPoint >= window.innerWidth && !swiperBool) {
205	// 			createSwiper();
206	// 			swiperBool = true;
207	// 		// }
208	// 	},
209	// 	false
210	// );
211	// const createSwiper = () => {
212	// 	topSpSwiper = new Swiper('.top_sp_slide', {
213	// 		loop: true,
214	// 		speed: 1000,
215	// 		slidesPerView: 1,
216	// 		autoplay: {
217	// 			delay: 4000,
218	// 			disableOnInteraction: false,
219	// 		},
220	// 		spaceBetween: 40,
221	// 		navigation: {
222	// 			nextEl: '.top_sp_slide .swiper-button-next',
223	// 			prevEl: '.top_sp_slide .swiper-button-prev',
224	// 		},
225	// 		breakpoints: {
226	// 			768: {
227	// 				slidesPerView: 3,
228	// 			}
229	// 		}
230	// 	});
231	// };
232}
233
234/* Staff動画のスマホスライド
235---------------------------------------------------------- */
236if( document.querySelector('.staff_slider') ){
237	//staff slider
238	if (window.matchMedia('(max-width: 767px)').matches) {
239		var swiper = new Swiper(".staff_slider", {
240			slidesPerView: 1.2,
241			spaceBetween: '10%',
242			centeredSlides: true,
243			navigation: {
244				prevEl: ".slider_prev_btn",
245				nextEl: ".slider_next_btn",
246			},
247		});
248	}
249}
250
251
252/* ==========================================================================//
253//
254// アニメーション
255//
256// ========================================================================== */
257document.addEventListener('DOMContentLoaded', function () {
258	animationStart();
259	bgParallax();
260});
261/* 要素まできたらアニメーション
262---------------------------------------------------------- */
263function animationStart(){
264	const items = document.querySelectorAll('[class^="fadeIn"],[class^="js_anim"]');
265	const options = {
266		root: null,
267		rootMargin: '0px',
268		threshold: 0.4
269	};
270	const observer = new IntersectionObserver(showElements, options);
271	items.forEach(item => {
272		observer.observe(item);
273	});
274	function showElements(entries) {
275		entries.forEach(entry => {
276			if (entry.isIntersecting) {
277				entry.target.classList.add('js_active');
278			}
279		});
280	};
281}
282/* 汎用の背景パララックス
283---------------------------------------------------------- */
284function bgParallax(){
285	const targetElements = document.querySelectorAll('.bg_parallax');
286	window.addEventListener('scroll', function () {
287		let scrollY = window.scrollY || window.pageYOffset;
288		let windowH = window.innerHeight || document.documentElement.clientHeight;
289
290		targetElements.forEach(function (target) {
291			let targetPosOT = target.getBoundingClientRect().top + scrollY;
292			let targetFactor = 0.15;
293			let offsetBeforeEnteringViewport = 100;
294			let offsetAfterLeavingViewport = 100;
295			if (scrollY > targetPosOT - windowH - offsetBeforeEnteringViewport) {
296				let offsetBottom = targetPosOT + target.clientHeight + offsetAfterLeavingViewport;
297				if (scrollY < offsetBottom) {
298					target.style.backgroundPositionY = (scrollY - targetPosOT) * targetFactor + 'px';
299				}
300			}
301		});
302	});
303}
304
305/* ==========================================================================//
306//
307// コラム詳細
308//
309// ========================================================================== */
310const postContent = document.querySelector('.post_contents');
311if( postContent ){
312	$('.post_contents table').each(function(){
313		$(this).wrap('<div class="js-scrollable">');
314	});
315}
316
317//scroll hint
318if( window.matchMedia("(max-width: 767px)").matches ){
319	new ScrollHint('.js-scrollable', {
320		i18n: {
321			scrollable: 'スクロールできます'
322		}
323	});
324}
325
326/* faq
327---------------------------------------------------------- */
328if( document.querySelector('.dlist_faq') ){
329	$('.dlist_faq dt').not('.js_open').next().hide();
330	$('.dlist_faq dt').on('click', function(){
331		if( $(this).hasClass('js_open') ){
332			$(this).removeClass('js_open').next().stop().slideUp();
333		} else {
334			$(this).addClass('js_open').next().stop().slideDown();
335		}
336	});
337}
338
339{
340	const tabMenus = document.querySelectorAll('.list_tab__item');

341	tabMenus.forEach((tabMenu) => {
342	  tabMenu.addEventListener('click', tabSwitch);
343	})
344	function tabSwitch(e) {
345		const tabTargetData = e.currentTarget.dataset.tab;
346		const tabList = e.currentTarget.closest('.list_tab');
347		const tabItems = tabList.querySelectorAll('.list_tab__item');
348		const tabPanelItems = tabList.nextElementSibling.querySelectorAll('.list_panel__item');
349		tabItems.forEach((tabItem) => {
350			tabItem.classList.remove('js_active');
351		})
352		tabPanelItems.forEach((tabPanelItem) => {
353			tabPanelItem.classList.remove('js_open');
354		})
355		e.currentTarget.classList.add('js_active');
356		tabPanelItems.forEach((tabPanelItem) => {
357			if (tabPanelItem.dataset.panel ===  tabTargetData) {
358				tabPanelItem.classList.add('js_open');
359			}
360		})
361	}
362}