https://kidsdesignlabo.com/wp-content/themes/kidsdesignlabo.com/js/script.js

1
2
3jQuery(function($){
4	
5	//serviceページ スライド
6	$('.service_image_list').slick({
7		slidesToScroll: 1,
8		autoplay: true,
9		autoplaySpeed: 6000,
10		dots:true,
11	});
12	
13	//topページ メインイメージポジション
14	let mainimage_size = $('.mainimage img').width();
15	let mainimage_box_size = $('.mainimage>ul').width();
16	if(mainimage_size > mainimage_box_size){
17		$('.mainimage img').css('transform','translate(-' + (mainimage_size - mainimage_box_size) / 2 + 'px,0)');
18	}
19
20	//topページ メインイメージスライド
21	$('.mainimage ul').slick({
22		slidesToShow: 1,
23		autoplay: true,
24		autoplaySpeed: 4000,
25		vertical: true,
26		cssEase: 'linear',
27		speed: 2000,
28	});
29	
30	//SP版ハンバーガーナビ
31	$('.navi_trigger').on('click',function(){
32		$(this).toggleClass('active');
33		$('.language_box').toggleClass('fade_box');
34		$('.sp_navi').slideToggle(1000);
35	});
36	
37	//recruitページ 開閉動作
38	$('.recruit_comment h3').on('click',function(){
39		$('.recruit_comment .recruit_comment_text').slideToggle(1000);
40		$(this).toggleClass('roteta_tryangle');
41	});
42	$('.recruit_pull_content h4').on('click',function(){
43		let classVal = $(this).attr('class');
44		let classVals1 = classVal.split(' ');
45		let classVals2 = classVals1[0].split('_');
46		$('.recruit_content_'+ classVals2[2]).slideToggle(1000);
47		$(this).toggleClass('roteta_tryangle');
48	});
49	
50	//voiceページ スライド不具合調整
51	var slick = $('.voice_slide ul').not('.slick-initialized').slick({
52		slidesToShow: 1,
53		autoplay: true,
54		autoplaySpeed: 6000,
55		dots:true,
56	});
57	$('.voice_content_list>span,.voice_content_list_inner>span').text('');
58	$('.voice_content_list>span,.voice_content_list_inner>span').text('');
59	$('.voice_content_list_inner').css('display','none');
60	$('.voice_content_list').on('click',function(){
61		$(this).next('.voice_content_list_inner').slideToggle(1000);
62		$(this).children('span').toggleClass('tryangle_rotate');
63		$('.voice_slide ul').animate({'z-index':1},100,function(){
64			slick.slick('setPosition');
65			$(this).animate({'opacity':1});
66		});
67	});
68	$('.voice_content_list_inner>span').on('click',function(){
69		$(this).parent('.voice_content_list_inner').slideUp(1000);		$(this).parent('.voice_content_list_inner').prev().children('span').removeClass('tryangle_rotate');
70	});
71	
72	//言語対応ドメイン変更
73	$('.language').change(function(e) {
74		e.preventDefault();
75		let value = $(this).val();
76		//変数宣言
77		let language_url = '';
78		let delete_after_str = '';
79		//ドメイン
80		let host = $(location).attr('host');
81		//ドメインのパス
82		let domain = $(location).attr('host');
83		//ドメイン以下のパス
84		let domain_path = $(location).attr('pathname');
85		if( ~domain_path.indexOf('/en/') || ~domain_path.indexOf('/ch/') ) {
86			// 0文字目から4文字分を指定
87			let exist_language = domain_path.substr( 0, 3 );
88			let regExp = new RegExp( exist_language, "g" ) ;
89			domain_path = domain_path.replace( regExp , "" ) ;
90		}
91		if( value == 'ja' || value == 'jp' ){
92			language_url = 'https://' + host + domain_path;
93		}else {
94			language_url = 'https://' + host + '/' + value + domain_path;
95		}
96		location.href = language_url;
97	});
98	
99
100	
101	let w = $(window).width();
102    let x = 787;
103    if (w <= x) {
104		//  スマホ版  //
105		
106		//works詳細ページ スライド
107		$('.service_work_content .works_list').slick({
108			slidesToShow: 1,
109			slidesToScroll: 1,
110			autoplay: true,
111			autoplaySpeed: 6000,
112		});
113		
114		//serviceページ worksコンテンツスライド
115		$('.works_image').slick({
116			slidesToScroll: 1,
117			autoplay: true,
118			autoplaySpeed: 6000,
119		});
120		
121		//bookページ スライド
122		$('.book_image').slick({
123			slidesToScroll: 1,
124			autoplay: true,
125			autoplaySpeed: 6000,
126			dots:true,
127		});
128		
129		//worksページ 検索ボックス開閉
130		$('.works_left_bar>ul>li>span').text('');
131		$('.works_left_bar>ul>li:nth-child(2)>p').on('click',function(){
132			$(this).next('ul').slideToggle(1000);
133		});
134		$('.works_left_bar>ul>li:nth-child(2)>span').on('click',function(){
135			$(this).prev('ul').slideToggle(1000);
136		});
137		$('.works_left_bar>ul>li>ul>li ul,.works_left_bar>ul>li>ul>li .building_box,.works_left_bar>ul>li>ul>li form').css('display','none');
138		$('.works_left_bar>ul>li>ul>li .click_active').on('click',function(e){
139			$(this).next('ul').slideToggle(1000);
140			$(this).next('.building_box,form').slideToggle(500);
141		});
142
143		//spナビ 開閉
144		$('.sp_navi>ul>li').on('click',function() {

145			let $this = $(this).children('ul');
146			$($this).slideToggle(1000);
147		});
148		
149		$('.service_box_wrapper .service_box').css('display','none');
150		
151		//ページトップ
152        $(".pagetop").on('click',function() {
153            $('html,body').animate({scrollTop: 0}, 'slow');
154        });
155		
156		//serviceページ メインイメージ高さ調整
157		let window_height_size = $(window).height();
158		let window_width_size = $(window).width();
159		window.addEventListener('resize', () => {
160			let vh = window.innerHeight * 0.01;
161			document.documentElement.style.setProperty('--vh', `${vh}px`);
162		});
163		$('.mainimage_service,.mainimage_about,.mainimage_book').css('height',window_height_size + 'px');
164		let mainimage_service_height_size = $('.mainimage_service img').height();
165		let mainimage_service_box_height = $('.mainimage_service').height();
166		$('.mainimage_service_box').css('top',( window_height_size - 170 ) + 'px');
167		$('.mainimage_service img').css('height',( window_height_size - 80 - 170 ) + 'px');
168		let mainimage_service_width_size = window_height_size - 80 - 170 ;
169		if(mainimage_service_width_size > window_width_size){
170			$('.mainimage_service img').css('transform','translate(-' + (mainimage_service_width_size - window_width_size) / 2 + 'px,0)');
171		}
172		if(mainimage_service_box_height > mainimage_service_height_size + 80 + 170 ){
173			console.log(mainimage_service_box_height);
174			$('.mainimage_service_box').css('top',( mainimage_service_height_size + 80 ) + 'px');
175			$('.mainimage_service_box').css('height',( window_height_size - 80 - mainimage_service_height_size ) + 'px');
176		}
177		$('.mainimage_about>p, .mainimage_service>p').css('bottom','0%');
178		
179    }else {
180		//  PC版  //
181		//serviceページ worksコンテンツスライド
182		$('.service_work_content .works_list').slick({
183			slidesToShow: 3,
184			slidesToScroll: 1,
185			autoplay: true,
186			autoplaySpeed: 6000,
187		});
188		
189		$('.service_menu li').on('click',function() {
190			let service_menu_name = $(this).attr('class').split(' ');
191			$('.service_menu li').css('border-bottom','none');
192			$('.service_box_wrapper .service_box').css('display','none');
193			$('.service_box_wrapper .' + service_menu_name[0]).css('display','block');
194			$(this).css('border-bottom','1px solid #000');
195		});
196		
197		//topページ アニメーション
198		$('#home').addClass('mainimage_fixed');
199		let scroll = $(window).scrollTop();
200		if(scroll == 0){
201			//sp版
202			$(window).mousewheel(function(eo, heel, deltaX, deltaY) {
203				$('.mainimage_inner_text').addClass('mainimage_scale');
204				$('.scroll').addClass('scroll_action');
205				setTimeout( function () {
206					$('#home').removeClass('mainimage_fixed');
207				}, 2000);
208			});
209			
210			//ipad版
211			window.addEventListener("load", function(event) {
212				var touchStartX;
213				var touchStartY;
214				var touchMoveX;
215				var touchMoveY;
216				// 開始時
217				window.addEventListener("touchstart", function(event) {
218				// 座標の取得
219				touchStartX = event.touches[0].pageX;
220				touchStartY = event.touches[0].pageY;
221				}, { passive: false });
222				// 移動時
223				window.addEventListener("touchmove", function(event) {
224				// 座標の取得
225				touchMoveX = event.changedTouches[0].pageX;
226				touchMoveY = event.changedTouches[0].pageY;
227				}, { passive: false });
228				// 終了時
229				window.addEventListener("touchend", function(event) {
230				// 移動量の判定
231				if (touchStartY > touchMoveY) {
232					if (touchStartY > (touchMoveY + 5)) {
233						$('.mainimage_inner_text').addClass('mainimage_scale');
234						$('.scroll').addClass('scroll_action');
235						setTimeout( function () {
236							$('#home').removeClass('mainimage_fixed');
237						}, 2000);
238					}
239				}
240				}, { passive: false });
241			}, { passive: false });
242		}else {
243			$('.mainimage_inner_text').addClass('mainimage_scale');
244			$('.scroll').addClass('scroll_action');
245			$('#home').removeClass('mainimage_fixed');
246		}		
247	}
248
249
250});