https://www.ambushdesign.com/assets/front/js/top.js?1787133262

1$(function(){
2	function initSwiper(container) {
3		return new Swiper(container, {
4			navigation: {
5				nextEl: ".item-swiper-next",
6				prevEl: ".item-swiper-prev",
7			},
8		});
9	}
10	//画像スライド
11	itemSwiper = initSwiper('.item-swiper-container');
12
13	// 再生失敗時の例外で処理が止まらないようにする
14	function tryPlay(videoElement) {
15		videoElement.play().catch(function () {});
16	}
17	// 動画の初回ロードと再生を担当する
18	function loadAndPlayVideo($video) {
19		// 2回目以降はロード済みのため再生のみ
20		if ($video.data("loaded") === true) {
21			tryPlay($video.get(0));
22			return;
23		}
24		// 初回ロード済みフラグを立てる
25		$video.data("loaded", true);
26		const src = $video.data("src");
27		if (src) {
28			$("<source>", {
29				src: src,
30				type: "video/mp4"
31			}).appendTo($video);
32			$video.one("canplay", function () {
33				tryPlay(this);
34			});
35			$video.get(0).load();
36			return;
37		}
38		tryPlay($video.get(0));
39	}
40
41	// 画面内/画面外の判定で動画の再生・停止を制御
42	const observer = new IntersectionObserver(function (entries) {
43		$.each(entries, function (_, entry) {
44			const $video = $(entry.target);
45
46			if (entry.isIntersecting) {
47				loadAndPlayVideo($video);
48			} else {
49				// 画面外では再生を止める
50				entry.target.pause();
51			}
52		});
53	},
54	{
55		threshold: 0.3
56	});
57
58	// 指定範囲配下の .js-item-video を監視対象へ登録する
59	function observeVideos(rootElement) {
60		const $root = rootElement ? $(rootElement) : $(document);
61		const $videos = $root.is(".js-item-video")
62			? $root.add($root.find(".js-item-video"))
63			: $root.find(".js-item-video");
64
65		$videos.each(function () {
66			const $video = $(this);
67			// 二重登録を避ける
68			if ($video.data("observed") === true) {
69				return;
70			}
71			$video.data("observed", true);
72			observer.observe(this);
73		});
74	}
75
76	//Color変更
77	$(".colorchip-list .colorchip").on("mouseover",function(){		
78		if(window.matchMedia('screen and (min-width:64em)').matches)
79		{
80			let color = $(this).data("color");
81			let commodity_number = $(this).data("commodity_number");
82			let goods_name = $(this).data("goods_name");
83			let target_goods_img_list = goods_img_list[commodity_number][color];
84			if (target_goods_img_list && Object.keys(target_goods_img_list).length > 0) {
85				let goods_detail_url = goods_detail_url_list[commodity_number][color];
86				let html = '';
87				$.each(target_goods_img_list, function(key, value) {
88					html += '<li class="swiper-slide">'
89					html += '<a href="' + goods_detail_url + '">'
90					let decoded_value = typeof value === "string" ? $('<textarea/>').html(value).text() : value;
91					let is_media_tag = typeof decoded_value === "string" && /^\s*<(video|img)\b/i.test(decoded_value);
92					if (is_media_tag) {
93						html += decoded_value + '</a></li>';
94					} else {
95						html += '<img src="' + value + '" alt="' + goods_name + key + '"></a></li>';
96					}
97				});
98				let $tile = $(this).closest(".goodsTile__layer");
99				let $swiperWrapper = $tile.find('.swiper-wrapper');
100				let $swiperContainer = $tile.find('.item-swiper-container');
101
102				// HTML更新
103				$swiperWrapper.html(html);
104
105				// 既存のSwiperをdestroy（再初期化のため）
106				if ($swiperContainer[0].swiper) {
107					$swiperContainer[0].swiper.destroy(true, true);
108				}
109
110				// 再初期化
111				itemSwiper = initSwiper($swiperContainer[0]);
112
113				// 追加された動画要素を監視対象に登録
114				observeVideos($swiperWrapper[0]);
115			}
116			$(this).closest(".colorchip-list").find(".colorchip").not(this).removeClass("active");
117			$(this).addClass("active");
118		}
119	});
120	// 商品スライダー初期表示
121	$('.colorchip-list .colorchip.active').trigger('mouseover');
122
123	let collectionSwiper;
124	function setSlider(){
125		if(window.matchMedia('screen and (min-width:64em)').matches)
126		{
127			if(!collectionSwiper)
128			{
129				collectionSwiper = new Swiper('#collection-swiper-container', {
130					slidesPerView:'auto',
131					mousewheel: {
132						forceToAxis: true,
133						sensitivity: 3
134					},
135				});
136			}		
137		}
138		else
139		{
140			if(collectionSwiper)
141			{
142				collectionSwiper.destroy(true, true);
143				collectionSwiper = null;
144			}		
145		}
146	}
147
148	$(window).on('load resize', function(){
149		setSlider();
150	});
151
152	//Header Color
153	if($(".scroll-section.active").hasClass("section--dark"))
154	{
155		$("#header").addClass("header--white");
156	}
157
158	function setScrollDistance(position)
159	{
160		let distance;
161		if(window.matchMedia('screen and (min-width: 90em)').matches)
162		{
163			if(position == "top")
164			{
165				distance = "top-=68";
166			}
167			else if(position == "bottom")
168			{
169
170			}			
171		}
172		else
173		{			
174			if(position == "top")
175			{
176				distance = "top-=63";
177			}
178			else if(position == "bottom")
179			{
180				distance = "bottom-=63";
181			}	
182		}
183		return distance;
184	}
185
186	gsap.registerPlugin(ScrollTrigger);
187	const header = document.getElementById("header");
188	const scrollHeader = document.getElementById("scroll-header");
189	document.querySelectorAll('.scroll-section').forEach((el,index) =>
190	{
191		// スマートフォンサイズの時だけ判定
192		if (el.classList.contains('sp_only64em')) {
193			if (window.matchMedia('screen and (min-width: 64em)').matches) {
194				return;
195			}
196		}
197		ScrollTrigger.create(
198		{
199			trigger: el,
200			start: setScrollDistance("top"),
201			end: setScrollDistance("bottom"),
202			onEnter: () => {	
203				if(window.matchMedia('screen and (min-width: 90em)').matches)
204				{
205					if (el.classList.contains('section--dark'))
206					{
207						header.classList.add('header--white');
208					}
209					else
210					{
211						header.classList.remove('header--white');
212					}
213				}								
214				if (el.classList.contains('white-section'))
215				{
216					header.classList.add('header--bg-white');
217				}
218				else
219				{
220					header.classList.remove('header--bg-white');
221				}
222				el.classList.add('active');
223			},
224			onLeave: () => {
225      	el.classList.remove('active');				
226    	},
227			onLeaveBack: () => {
228      	el.classList.remove('active');
229				if (el.classList.contains('white-section'))
230				{
231					header.classList.remove('header--bg-white');
232				}
233    	},
234			onEnterBack: () => {
235/* 				if(window.matchMedia('screen and (max-width: 89.94em)').matches)
236				{
237					if(index == 1)
238					{
239						header.classList.remove('header--hide');
240						scrollHeader.classList.remove('show');
241					}
242				} */
243				$("#header").addClass("header--white");
244				el.classList.add('active');
245				if (el.classList.contains('section--dark'))
246				{
247					header.classList.add('header--white');
248				}
249				else
250				{
251					header.classList.remove('header--white');
252				}
253			},
254		});
255	});
256
257	document.querySelectorAll('video').forEach((video) => {
258		video.addEventListener('loadeddata', () => {
259			ScrollTrigger.refresh();
260		});
261	});
262
263	$(window).on("scroll", function () {
264		if(window.matchMedia('screen and (max-width: 89.94em)').matches)
265		{
266			if($(window).scrollTop() > $(".scroll-section").eq(1).offset().top - $("#header .header__content").outerHeight())
267			{
268				header.classList.add('header--hide');
269				scrollHeader.classList.add('show');		
270			}
271			else
272			{

273				header.classList.remove('header--hide');
274				scrollHeader.classList.remove('show');
275			}			
276		}
277	});
278
279	observeVideos(document);
280});
281