https://kasago.jp/wp-content/themes/kasago_20250305/assets/js/main.js?ver=1770279513

1// parallax
2let isAnimating = false;
3
4window.addEventListener('load', function () {
5	const options = {
6		root: null,
7		rootMargin: '0px',
8		threshold: 0.1,
9	};
10
11	const observerCallback = (entries, observer) => {
12		entries.forEach((entry) => {
13			const parallaxElement = entry.target;
14			const speed = parseFloat(parallaxElement.getAttribute('data-speed'));
15
16			if (entry.isIntersecting) {
17				if (!parallaxElement.scrollListenerAdded) {
18					parallaxElement.scrollListener = throttle(
19						() => onScroll(parallaxElement, speed),
20						20,
21					);
22					window.addEventListener('scroll', parallaxElement.scrollListener);
23					parallaxElement.scrollListenerAdded = true;
24
25					if (parallaxElement.initialPosition === undefined) {
26						parallaxElement.initialPosition =
27							parallaxElement.getBoundingClientRect().top + window.scrollY;
28						parallaxElement.height = parallaxElement.offsetHeight;
29					}
30
31					updateTransform(parallaxElement, speed);
32				}
33			} else {
34				if (parallaxElement.scrollListenerAdded) {
35					window.removeEventListener('scroll', parallaxElement.scrollListener);
36					parallaxElement.scrollListenerAdded = false;
37				}
38			}
39		});
40	};
41
42	const onScroll = (parallaxElement, speed) => {
43		updateTransform(parallaxElement, speed);
44	};
45
46	const updateTransform = (parallaxElement, speed) => {
47		const scrollY = window.scrollY;
48		const elementOffset = parallaxElement.initialPosition;
49		const offsetFromTop = scrollY - elementOffset;
50
51		parallaxElement.style.transform = `translateY(${offsetFromTop * speed}px)`;
52	};
53
54	const observer = new IntersectionObserver(observerCallback, options);
55	const parallaxElements = document.querySelectorAll(
56		'[data-parallax="scrollparallax"]',
57	);
58	parallaxElements.forEach((el) => observer.observe(el));
59
60	function throttle(func, limit) {
61		let lastFunc;
62		let lastRan;
63		return function () {
64			const context = this;
65			const args = arguments;
66			if (!lastRan) {
67				func.apply(context, args);
68				lastRan = Date.now();
69			} else {
70				clearTimeout(lastFunc);
71				lastFunc = setTimeout(
72					function () {
73						if (Date.now() - lastRan >= limit) {
74							func.apply(context, args);
75							lastRan = Date.now();
76						}
77					},
78					limit - (Date.now() - lastRan),
79				);
80			}
81		};
82	}
83});
84
85//loading
86
87$(function () {
88	$(window).on('load', function () {
89		$('#loader').delay(600).fadeOut(600);
90	});
91
92	setTimeout(function () {
93		if ($('#loader').is(':visible')) {
94			$('#loader').fadeOut(500);
95		}
96	}, 800);
97
98	setTimeout(function () {
99		var wHeight = $(document).height();
100		var scrollAmount = $(document).scrollTop();
101
102		$('.fv_fadein').each(function () {
103			var targetPosition = $(this).offset().top;
104			if (scrollAmount > targetPosition - wHeight + 200) {
105				$(this).addClass('fv_is-fadein');
106			}
107		});
108	}, 800);
109});
110
111window.addEventListener(
112	'load',
113	function () {
114		const observer = new IntersectionObserver(
115			function (entries) {
116				for (let i = 0; i < entries.length; i++) {
117					if (entries[i].intersectionRatio <= 0) continue;
118					showElm(entries[i].target);
119				}
120			},
121			{
122				rootMargin: '-20% 0%',
123			},
124		);
125		const elements = document.querySelectorAll('.view');
126		for (let i = 0; i < elements.length; i++) {
127			observer.observe(elements[i]);
128		}
129		function showElm(e) {
130			e.classList.add('wao');
131			observer.unobserve(e);
132		}
133	},
134	false,
135);
136
137// header
138
139$(function () {
140	$('.hamburger').on('click', function (event) {
141		event.preventDefault();
142		var $header = $('#header');
143		var $hamburger = $('.hamburger');
144
145		$header.toggleClass('is-active');
146		$hamburger.toggleClass('is-active');
147
148		if ($header.hasClass('is-active')) {
149			// メニューが開いた時：背景のスクロールを完全に止める
150			$('html, body').css({
151				overflow: 'hidden',
152				height: '100%',
153			});
154		} else {
155			// メニューを閉じた時：解除
156			$('html, body').css({
157				overflow: '',
158				height: '',
159			});
160		}
161	});
162});
163
164// $(function () {
165// 	$('.hamburger').on('click', function (event) {
166// 		event.preventDefault();
167// 		$('#header').toggleClass('is-active');
168// 		$('.hamburger').toggleClass('is-active');
169
170// 		if ($('#header').hasClass('is-active')) {
171// 			var scrollBarWidth =
172// 				window.innerWidth - document.documentElement.clientWidth;
173
174// 			if (scrollBarWidth > 0) {
175// 				$('html').css('overflow', 'hidden');
176// 			}
177// 		} else {
178// 			$('html, body').removeAttr('style');
179// 		}
180// 	});
181// });
182
183(function () {
184	const observer = new IntersectionObserver(
185		(entries) => {

186			entries.forEach((entry) => {
187				if (entry.target.classList.contains('hero')) {
188					if (entry.isIntersecting) {
189						$('.scrollheader').removeClass('is-change');
190						$('#global').removeClass('is-change');
191						$('.triplabot-icon-circle').removeClass('is-change');
192					} else {
193						$('.scrollheader').addClass('is-change');
194						$('#global').addClass('is-change');
195						$('.triplabot-icon-circle').addClass('is-change');
196					}
197				}
198			});
199		},
200		{
201			root: null,
202			threshold: 0,
203		},
204	);
205
206	const heroElement = document.querySelector('.hero');
207	if (heroElement) observer.observe(heroElement);
208})();
209
210(function () {
211	const observer = new IntersectionObserver(
212		(entries) => {
213			entries.forEach((entry) => {
214				if (entry.target.id === 'footer') {
215					if (entry.isIntersecting) {
216						$('#global').removeClass('is-change');
217						$('.triplabot-icon-circle').removeClass('is-change');
218					} else {
219						$('#global').addClass('is-change');
220						$('.triplabot-icon-circle').addClass('is-change');
221					}
222				}
223			});
224		},
225		{
226			root: null,
227			threshold: 0,
228		},
229	);
230
231	const footerElement = document.querySelector('#footer');
232	if (footerElement) observer.observe(footerElement);
233})();
234
235// lang
236
237$('#global-ttl').on('click', function () {
238	$('#global-ttl').toggleClass('is-active');
239	$('.global-list').toggleClass('is-active');
240});
241
242// chat
243
244$(function () {
245	$('#header').each(function () {
246		if ($('#header').hasClass('b')) {
247			$('.triplabot-icon-circle').addClass('is-change');
248			$('#global').addClass('is-change');
249		}
250	});
251});
252
253window.addEventListener('DOMContentLoaded', () => {
254	const elmHeader = document.querySelector('#js-hamburger');
255	const elmIntersect = document.querySelector('#js-header-observer');
256	const doWhenIntersect = (entries) => {
257		elmHeader.setAttribute(
258			'data-js-scroll',
259			String(!entries[0].isIntersecting),
260		);
261	};
262	const observer = new IntersectionObserver(doWhenIntersect, {});
263	observer.observe(elmIntersect);
264});
265
266//slider
267(function () {
268	const mvSwiper = new Swiper('.mv01 .swiper', {
269		effect: 'fade',
270		fadeEffect: {
271			crossFade: true,
272		},
273		loop: true,
274		loopAdditionalSlides: 1,
275		speed: 2000,
276		autoplay: {
277			delay: 7000,
278			disableOnInteraction: false,
279			waitForTransition: false,
280		},
281		followFinger: false,
282	});
283})();
284(function () {
285	const mvSwiper = new Swiper('.mv01delay .swiper', {
286		effect: 'fade',
287		fadeEffect: {
288			crossFade: true,
289		},
290		loop: true,
291		loopAdditionalSlides: 1,
292		speed: 2000,
293		autoplay: {
294			delay: 8500,
295			disableOnInteraction: false,
296			waitForTransition: false,
297		},
298		followFinger: false,
299	});
300})();
301
302(function () {
303	const mySwiper = new Swiper('.mv02 .swiper', {
304		effect: 'fade',
305		fadeEffect: {
306			crossFade: true,
307		},
308		loop: true,
309		loopAdditionalSlides: 1,
310		speed: 2000,
311		autoplay: {
312			delay: 7000,
313			disableOnInteraction: false,
314			waitForTransition: false,
315		},
316		followFinger: false,
317	});
318})();
319(function () {
320	const mySwiper = new Swiper('.mv03 .swiper', {
321		effect: 'fade',
322		fadeEffect: {
323			crossFade: true,
324		},
325		loop: true,
326		loopAdditionalSlides: 1,
327		speed: 2000,
328		autoplay: {
329			delay: 7000,
330			disableOnInteraction: false,
331			waitForTransition: false,
332		},
333		followFinger: false,
334		pagination: {
335			el: '.mv03 .swiper-pagination',
336			clickable: true,
337		},
338		navigation: {
339			nextEl: '.mv03 .swiper-button-next',
340			prevEl: '.mv03 .swiper-button-prev',
341		},
342	});
343})();
344(function () {
345	const slideLength = document.querySelectorAll('.card01 .swiper-slide').length;
346
347	const initSwiper = () => {
348		const mySwiper = new Swiper('.card01 .swiper', {
349			slidesPerView: 'auto',
350			spaceBetween: 16,
351			loop: true,
352			loopedSlides: slideLength,
353			speed: 40000,
354			autoplay: {
355				delay: 0,
356				disableOnInteraction: false,
357			},
358			freeMode: {
359				enabled: true,
360				momentum: false,
361			},
362			grabCursor: true,
363			breakpoints: {
364				1025: {
365					spaceBetween: 32,
366				},
367			},
368			on: {
369				touchEnd: (swiper) => {
370					swiper.slideTo(swiper.activeIndex + 1);
371				},
372			},
373		});
374	};
375
376	window.addEventListener('load', function () {
377		initSwiper();
378	});
379})();
380(function () {
381	const mySwiper = new Swiper('.card03 .swiper', {
382		slidesPerView: 1,
383		spaceBetween: 16,
384		grabCursor: true,
385		watchSlidesProgress: true,
386		navigation: {
387			nextEl: '.card03 .swiper-button-next',
388			prevEl: '.card03 .swiper-button-prev',
389		},
390		breakpoints: {
391			1025: {
392				slidesPerView: 1,
393				spaceBetween: 35,
394			},
395		},
396	});
397})();
398
399$(document).ready(function () {
400	$('.p_for__cat_link01')
401		.mouseover(function () {
402			$('.p_for__cat_img01').css({
403				opacity: 1,
404				transition: 'transition: opacity .6s cubic-bezier(0.26, 0.06, 0, 1);',
405			});
406		})
407		.mouseout(function () {
408			$('.p_for__cat_img01').css({
409				opacity: 0,
410				transition: 'transition: opacity .6s cubic-bezier(0.26, 0.06, 0, 1);',
411			});
412		});
413	$('.p_for__cat_link02')
414		.mouseover(function () {
415			$('.p_for__cat_img02').css({
416				opacity: 1,
417				transition: 'transition: opacity .6s cubic-bezier(0.26, 0.06, 0, 1);',
418			});
419		})
420		.mouseout(function () {
421			$('.p_for__cat_img02').css({
422				opacity: 0,
423				transition: 'transition: opacity .6s cubic-bezier(0.26, 0.06, 0, 1);',
424			});
425		});
426	$('.p_for__cat_link03')
427		.mouseover(function () {
428			$('.p_for__cat_img03').css({
429				opacity: 1,
430				transition: 'transition: opacity .6s cubic-bezier(0.26, 0.06, 0, 1);',
431			});
432		})
433		.mouseout(function () {
434			$('.p_for__cat_img03').css({
435				opacity: 0,
436				transition: 'transition: opacity .6s cubic-bezier(0.26, 0.06, 0, 1);',
437			});
438		});
439});
440
441window.addEventListener('DOMContentLoaded', function () {
442	let tabs = document.querySelectorAll('.tab li');
443	let contents = document.querySelectorAll('.content');
444	for (let i = 0; i < tabs.length; i++) {
445		tabs[i].addEventListener('click', function () {
446			let num = Array.prototype.indexOf.call(tabs, this);
447			for (let j = 0; j < contents.length; j++) {
448				contents[j].classList.remove('active');
449			}
450			contents[num].classList.add('active');
451			for (let k = 0; k < tabs.length; k++) {
452				tabs[k].classList.remove('active');
453			}
454			this.classList.add('active');
455		});
456	}
457});
458
459$('.js-accordion').on('click', function () {
460	$(this).toggleClass('is-active').next('dd').slideToggle('500');
461});