https://kuramore.jp/assets/common/js/common.js

1window.util = {};
2window.util.isSP = ($(window).width() <= 768) ? true : false;
3window.util.isPC = (window.util.isSP) ? false : true;
4window.util.startPos = 0;
5$(function(){
6/*ハンバーガーメニュー表示処理*/
7// ハンバーガーメニューのボタンがクリックされたら
8$(".hamburgerMenu .openbtn ,.hamburgerMenu #g-nav .btn-bottom").click(function () {
9  // 背景固定用クラス名付与・削除
10  $("html").toggleClass("body-fixed");
11  // openボタンに対しactiveクラスを付与・削除
12  $(".hamburgerMenu .openbtn").toggleClass('active');
13  if ($(".hamburgerMenu .openbtn.active").length) {
14    var currentScrollY = $(window).scrollTop();
15    // ハンバーガーメニューopenボタンクリック時のhtmlスクロール値をdata属性に持たせる
16    $('html').data('scroll', currentScrollY);
17    $('html.body-fixed').css({
18      position: 'fixed',
19      top: -1 * currentScrollY
20    });
21    // ナビにpanelactiveクラスを付与
22    $(".hamburgerMenu #g-nav").addClass('panelactive');
23  } else {
24    var scrollData = $('html').data('scroll');
25    // ナビにpanelactiveクラスを削除
26    $(".hamburgerMenu #g-nav").removeClass('panelactive');
27    $('html').css({
28      position: 'static',
29      top: 'auto'
30    });
31    // スクロール位置を保持した状態にする
32    $("html,body").scrollTop(scrollData);
33  }
34});
35/*ハンバーガーメニュー内アコーディオン処理*/
36$('.hamburgerMenu .toggle_title').click(function () {
37  $(this).toggleClass('selected');
38  $(this).next().slideToggle();
39});
40/*記事側MVスライダー*/
41var mySwiper = new Swiper('.js-mv-article.swiper-container', {
42	allowTouchMove: false,
43	loop: true,
44	effect: 'fade',
45	slidesPerView: "auto",
46	loopedSlides: 3,
47	speed: 4500,
48	spaceBetween: 0,
49	autoplay: {
50		delay: 2000,
51		disableOnInteraction: false,
52	},
53})
54	
55// loopedSlides: 3,
56/*SPヘッダー記事スライダー*/
57if ($(window).width() <= 767) { 

58 var swiper = new Swiper('.js-header-tab-article .swiper-container', {
59  slidesPerView: 3.5,
60  spaceBetween: 4,
61  loop: false,
62  freeMode: true,
63  freeModeMomentum: true,
64});
65}
66
67if ($(window).width() >= 768) { 
68  var mySwiper = new Swiper ('.js-ranking-article .swiper-container', {
69	loop: false,
70	slidesPerView: 3.5,
71	spaceBetween: 20,
72	navigation: {
73      nextEl: '.js-ranking-article .swiper-button-next',
74      prevEl: '.js-ranking-article .swiper-button-prev',
75    }
76  })
77} else {
78  var mySwiper = new Swiper ('.js-ranking-article .swiper-container', {
79	freeMode: true,
80    freeModeMomentum: true,
81	loop: false,
82	slidesPerView: 1.8,
83	spaceBetween: 10,
84  })
85}
86
87if ($(window).width() >= 768) { 
88  var mySwiper = new Swiper ('.js-new-article .swiper-container', {
89	loop: false,
90	slidesPerView: 3.5,
91	spaceBetween: 20,
92	navigation: {
93      nextEl: '.js-new-article .swiper-button-next',
94      prevEl: '.js-new-article .swiper-button-prev',
95    }
96  })
97} else {
98  var mySwiper = new Swiper ('.js-new-article .swiper-container', {
99	freeMode: true,
100    freeModeMomentum: true,
101	loop: false,
102	slidesPerView: 1.8,
103	spaceBetween: 10,
104  })
105}
106	
107if ($(window).width() >= 768) { 
108  var mySwiper = new Swiper ('.js-recommend-article .swiper-container', {
109	loop: false,
110	slidesPerView: 3.5,
111	spaceBetween: 20,
112	navigation: {
113      nextEl: '.js-recommend-article .swiper-button-next',
114      prevEl: '.js-recommend-article .swiper-button-prev',
115    }
116  })
117} else {
118  var mySwiper = new Swiper ('.js-recommend-article .swiper-container', {
119	freeMode: true,
120    freeModeMomentum: true,
121	loop: false,
122	slidesPerView: 1.8,
123	spaceBetween: 10,
124  })
125}
126	
127if ($(window).width() >= 768) { 
128var mySwiper = new Swiper ('.js-building01 .swiper-container', {
129	slidesPerView: 4,
130	spaceBetween: 40,
131	loop: true,
132	navigation: {
133      nextEl: '.js-building01 .swiper-button-next',
134      prevEl: '.js-building01 .swiper-button-prev',
135    },
136	onSlideChangeEnd : (s) => {s.fixLoop();}
137  })  
138} else {
139  var mySwiper = new Swiper ('.js-building01 .swiper-container', {
140	loop: true,
141	slidesPerView: 2,
142	spaceBetween: 20,
143	navigation: {
144      nextEl: '.js-building01 .swiper-button-next',
145      prevEl: '.js-building01 .swiper-button-prev',
146    }
147  })
148}
149	
150if ($(window).width() >= 768) { 
151var mySwiper = new Swiper ('.js-building02 .swiper-container', {
152	slidesPerView: 4,
153	spaceBetween: 40,
154	loop: true,
155	navigation: {
156      nextEl: '.js-building02 .swiper-button-next',
157      prevEl: '.js-building02 .swiper-button-prev',
158    },
159	onSlideChangeEnd : (s) => {s.fixLoop();}
160  })  
161} else {
162  var mySwiper = new Swiper ('.js-building02 .swiper-container', {
163	loop: true,
164	slidesPerView: 2,
165	spaceBetween: 20,
166	navigation: {
167      nextEl: '.js-building02 .swiper-button-next',
168      prevEl: '.js-building02 .swiper-button-prev',
169    }
170  })
171}
172
173 var swiper = new Swiper('.js-tag_keyword .swiper-container', {
174  loop: false,
175  freeMode: true,
176  freeModeMomentum: true,
177  slidesPerView: 'auto',
178});
179	
180if ($(window).width() <= 767) { 
181 var swiper = new Swiper(' .js-tabs-list .swiper-container', {
182  slidesPerView: 3.5,
183  spaceBetween: 4,
184  loop: false,
185  freeMode: true,
186  freeModeMomentum: true,
187});
188}
189	
190if ($(window).width() <= 767) { 
191  //物件スライダーアコーディオン
192  $('.building-slider .accordion_wrapper .accordion_header').click(function(){
193    $(this).toggleClass("open");
194	$(this).next('.accordion_inner').toggle();
195  });
196}
197
198  
199if ($(window).width() >= 768) {
200  if($(".js-instagram-movie li").length > 3){
201    var mySwiper = new Swiper ('.js-instagram-movie .swiper-container', {
202      loop: true,
203      slidesPerView: 3,
204      spaceBetween: 20,
205      navigation: {
206          nextEl: '.js-instagram-movie .swiper-button-next',
207          prevEl: '.js-instagram-movie .swiper-button-prev',
208        }
209    });
210  } else {
211    $(".js-instagram-movie .mod-swiper_btnWrapper").remove();
212    $(".js-instagram-movie").addClass("no-swiper-instagram-movie");
213    $(".js-instagram-movie li").removeClass("swiper-slide");
214  }
215} else {
216  if($(".js-instagram-movie li").length > 1) {
217  var mySwiper = new Swiper ('.js-instagram-movie .swiper-container', {
218      loop: true,
219      slidesPerView: 1,
220      spaceBetween: 10,
221      navigation: {
222          nextEl: '.js-instagram-movie .swiper-button-next',
223          prevEl: '.js-instagram-movie .swiper-button-prev',
224        }
225    });

226  } else {
227    $(".js-instagram-movie .mod-swiper_btnWrapper").remove();
228    $(".js-instagram-movie").addClass("no-swiper-instagram-movie");
229    $(".js-instagram-movie li").removeClass("swiper-slide");
230  }
231}
232  
233//汎用アコーディオン
234$('.js-accordion01 .js-accordion-box').on('click' ,function(){
235  $(this).parent('.js-accordion01').toggleClass('active');
236  $(this).siblings('.js-accordion-appear').slideToggle();
237});
238
239//汎用アニメーション有りアコーディオン
240$('.js-accord-btn').click(function () {
241  $(this).toggleClass('js-active');
242  $(this).next().slideToggle();
243});
244  
245//汎用物件アコーディオン
246$('.js-accordion-btn').on('click', function() {
247  $(this).next().slideToggle();
248  $(this).toggleClass('active');
249});
250  
251});
252
253//汎用追従
254$(this).scroll(function () {
255  if ($('.js-follow-btn-wrapper').length > 0) {
256    var footerHeight = $('footer').offset().top;
257    // FV～footer以降に現在の表示位置が来たらCTAを消す
258    if ($(window).scrollTop() > 0 && $(window).scrollTop() + $(window).height() < footerHeight) {
259      $('.js-follow-btn-wrapper .js-follow-btn-inner').fadeIn();
260    } else {
261      $('.js-follow-btn-wrapper .js-follow-btn-inner').fadeOut();
262    }
263  }
264});
265
266/*ヘッダースクロール処理*/
267$(window).scroll(function () {
268  if (window.util.isSP) {
269    if(!$('#g-nav').hasClass('panelactive')) {
270      var scrollTop = 0;
271      var scroll = $(window).scrollTop();
272      //ヘッダーの出し入れをする
273      if(scroll == window.util.startPos) {
274      //IE11対策で処理を入れない
275      }else if(scrollTop > scroll || 0 > scroll - window.util.startPos ){
276      //ヘッダーが上から出現する
277      $('header').removeClass('is-hide');
278      }else if (scrollTop < scroll){
279      //ヘッダーを上に隠す
280      $('header').addClass('is-hide');
281      }
282      window.util.startPos = scroll; //現在のスクロール値を比較用のwindow.util.startPosに格納
283    }
284  }
285});
286
287function activateSwiper1($target, $nextEl, $prevEl){
288  if ($(window).width() >= 768) { 
289    var mySwiper = new Swiper ($target, {
290      slidesPerView: 4,
291      centeredSlides: false,
292      spaceBetween: 20,
293      loop: true,
294      navigation: {
295        nextEl: $nextEl,
296        prevEl: $prevEl,
297      },
298      onSlideChangeEnd : (s) => {s.fixLoop();}
299    })  
300  } else {
301    var mySwiper = new Swiper ($target, {
302      loop: true,
303      slidesPerView: 2,
304      spaceBetween: 15,
305      centeredSlides: false,
306      navigation: {
307        nextEl: $nextEl,
308        prevEl: $prevEl,
309      }
310    })
311  }
312}
313
314function activateSwiper2($target, $nextEl, $prevEl){
315  if ($(window).width() >= 768) { 
316    var mySwiper = new Swiper ($target, {
317      slidesPerView: 4,
318      spaceBetween: 40,
319      loop: true,
320      navigation: {
321        nextEl: $nextEl,
322        prevEl: $prevEl,
323      },
324      onSlideChangeEnd : (s) => {s.fixLoop();}
325    })  
326  } else {
327    var mySwiper = new Swiper ($target, {
328      loop: true,
329      slidesPerView: 2,
330      spaceBetween: 20,
331      navigation: {
332        nextEl: $nextEl,
333        prevEl: $prevEl,
334      }
335    })
336  }
337}
338
339function activateSwiper3($target, $nextEl, $prevEl, isPCSlideLoop){
340  if ($(window).width() >= 768) { 
341    var mySwiper = new Swiper ($target, {
342      slidesPerView: 5,
343      spaceBetween: 20,
344      loop: isPCSlideLoop,
345      centeredSlides: isPCSlideLoop,
346      navigation: {
347        nextEl: $nextEl,
348        prevEl: $prevEl,
349      },
350      onSlideChangeEnd : (s) => {s.fixLoop();}
351    })  
352  } else {
353    var mySwiper = new Swiper ($target, {
354      loop: true,
355      slidesPerView: 2,
356      spaceBetween: 15,
357      centeredSlides: false,
358      navigation: {
359        nextEl: $nextEl,
360        prevEl: $prevEl,
361      }
362    })
363  }
364}
365
366function activateSwiper4($target, $nextEl, $prevEl, isPCSlideLoop){
367  if ($(window).width() >= 768) { 
368    var mySwiper = new Swiper ($target, {
369      slidesPerView: 5,
370      centeredSlides: isPCSlideLoop,
371      spaceBetween: 40,
372      loop: isPCSlideLoop,
373      navigation: {
374        nextEl: $nextEl,
375        prevEl: $prevEl,
376      },
377      onSlideChangeEnd : (s) => {s.fixLoop();}
378    })  
379  } else {
380    var mySwiper = new Swiper ($target, {
381      loop: true,
382      slidesPerView: 2,
383      spaceBetween: 15,
384      centeredSlides: false,
385      navigation: {
386        nextEl: $nextEl,
387        prevEl: $prevEl,
388      }
389    })
390  }
391}
392
393function activateSwiper5($target, $nextEl, $prevEl, isPCSlideLoop){
394  if ($(window).width() >= 768) { 
395    var mySwiper = new Swiper ($target, {
396      slidesPerView: 5,
397      spaceBetween: 20,
398      loop: isPCSlideLoop,
399      navigation: {
400        nextEl: $nextEl,
401        prevEl: $prevEl,
402      },
403      onSlideChangeEnd : (s) => {s.fixLoop();}
404    })  
405  } else {
406    var mySwiper = new Swiper ($target, {
407      loop: true,
408      slidesPerView: 2,
409      spaceBetween: 20,
410      navigation: {
411        nextEl: $nextEl,
412        prevEl: $prevEl,
413      }
414    })
415  }
416}
417
418function activateCommonSwiper($target, pcConfig, spConfig){
419  if ($(window).width() >= 768) { 
420    var mySwiper = new Swiper ($target, pcConfig)  
421  } else {
422    var mySwiper = new Swiper ($target, spConfig)
423  }
424}
425