https://wake-jinjya.com/wp-content/themes/sg094/js/main.js

1
2
3// main
4
5// eslint-disable-next-line no-undef
6var layzr = Layzr({
7  normal: 'data-layzr',
8  threshold: 50
9});
10
11layzr.on('src:after', function (elm) {
12  if(!elm.hasAttribute('data-layzr-bg')) return;
13  elm.style.backgroundImage = 'url(' + elm.getAttribute('src') + ')';
14  elm.removeAttribute('src');
15  elm.removeAttribute('data-layzr-bg');
16});
17
18document.addEventListener('DOMContentLoaded', function() {
19    layzr.update().check().handlers(true)
20}, false);
21
22var userAgent = window.navigator.userAgent.toLowerCase();
23var is_ie = (userAgent.indexOf('msie') != -1 || userAgent.indexOf('trident') != -1) ? true : false;
24
25// eslint-disable-next-line no-undef
26Swiper.prototype.getBreakpoint = function (breakpoints) {
27
28  var window_size = window.innerWidth
29  || document.documentElement.clientWidth
30  || document.body.clientWidth;
31
32  var swiper = this;
33  // Get breakpoint for window width
34  if (!breakpoints) {
35      return undefined;
36  }
37  var breakpoint = false;
38  var points = [];
39  Object.keys(breakpoints).forEach(function (point) {
40      points.push(point);
41  });
42  points.sort(function (a, b) {
43      return parseInt(a, 10) - parseInt(b, 10);
44  });
45  for (var i = 0; i < points.length; i += 1) {
46      var point = points[i];
47      if (swiper.params.breakpointsInverse) {
48          if (point <= window_size) {
49              breakpoint = point;
50          }
51      } else if (point >= window_size && !breakpoint) {
52          breakpoint = point;
53      }
54  }
55  return breakpoint || 'max';
56  };
57
58// $('a[href]').on('click tap', function(e) {
59//   var ref = location.href;
60//   var url = $(this).attr('href');
61//   var a_target = $(this).attr('target')
62
63//   if(a_target !== '_blank') {
64//     if( ref.indexOf(url.replace(/#.*$/, '')) != -1 && url.indexOf('#') != -1 ) {
65
66//       var speed = 300;
67//       var href= url.match(/#.*$/);
68//       var target = $(href[0]);
69//       var position = target.offset().top - $('.js-header').outerHeight();
70//       $('body, html').animate({ scrollTop: position }, speed, 'swing');
71//       return false;
72
73//     } else {
74
75//       e.preventDefault();
76//       url = $(this).attr('href');
77//       if (url !== '') {
78//         // $('body').attr('data-status', 'loadstart');
79//         setTimeout(function() {
80//           window.location = url;
81//         }, 200);
82//       }
83//       return false;
84
85//     }
86//   }
87
88// });
89
90// $('a:not([href^="tel:"]):not([target])').on('click tap', function(e) {
91
92  // var ref = location.href;
93  // var url = $(this).attr('href');
94
95  // if( ref.indexOf(url.replace(/#.*$/, '')) != -1 && url.indexOf('#') != -1 ) {
96
97  //   var speed = 300;
98  //   var href= url.match(/#.*$/);
99  //   var target = $(href[0]);
100  //   var position = target.offset().top - $('.l-header').outerHeight();
101  //   $('body, html').animate({ scrollTop: position }, speed, 'swing');
102  //   return false;
103
104  // }
105
106
107
108// });
109
110
111$('.js-accrodion-btn').on('click tap', function(e) {
112  $(this).next('.js-accrodion-target').slideToggle();
113  $(this).parent().toggleClass('is-open');
114
115});
116
117var scrollpos;
118
119$('.js-menu-toggle,.p-gnav-item-link').on('click tap', function() {
120  var status = $('body').attr('data-menu');
121  if( status == 'active' ) {
122    $('body').attr('data-menu', '');
123    $('body').attr('data-bodyfixed', 'false').css({'top': 0});
124    window.scrollTo( 0 , scrollpos );
125  } else {
126    scrollpos = $(window).scrollTop();
127    $('body').attr('data-menu', 'active');
128    $('body').attr('data-bodyfixed', 'true').css({'top': -scrollpos});
129  }
130});
131
132$('.c-pagetop-btn').on('click tap', function() {
133  $('body, html').animate({
134    scrollTop: 0
135  }, 300, 'swing');
136});
137
138
139$(window).on('load resize', function() {
140
141  // square image
142  if( $('.js-square-img')[0] ) {
143
144    var imgWidth = $('.js-square-img').width();
145    $('.js-square-img').css({
146      height: imgWidth + 'px',
147    });
148  }
149
150});
151
152
153$(window).on('load scroll', function() {

154  var h = $(window).height();
155  var scrollTop = $(window).scrollTop();
156
157  if( $('.js-pagetop')[0] ) {
158    if (scrollTop > h / 2) {
159      $('.js-pagetop').addClass('is-active');
160
161    }
162    else {
163      $('.js-pagetop').removeClass('is-active');
164
165    }
166  }
167
168  if( $('.l-header')[0] ) {
169    if (scrollTop > h / 1) {
170      $('.l-header').addClass('is-black');
171
172    }
173    else {
174      $('.l-header').removeClass('is-black');
175
176    }
177  }
178
179});
180
181
182
183$(window).on('load', function() {
184
185  // if( location.hash && $(location.hash)[0] ) {
186
187  //   var hash = location.hash;
188  //   console.log(hash);
189  //   setTimeout( function() {
190      
191  //     $('body, html').animate({ 
192  //       scrollTop: $(hash).offset().top - $('.js-header').outerHeight() }, 300, 'linear');
193  //   }, 300 );
194
195  // }
196
197  loadContents();
198
199
200	// $('.js-mheight').matchHeight();
201	// $('.js-mheight2').matchHeight();
202	// $('.js-mheight3').matchHeight();
203});
204
205
206$(document).ready(function() {
207
208  // scroll anchor
209
210  var hHeight = $('header').outerHeight();
211  var urlHash = location.hash;
212  var speed = 500;
213
214  if(urlHash) {
215    $('body,html').stop().scrollTop(0);
216    setTimeout(function () {
217      var target = $(urlHash);
218      var position = target.offset().top - hHeight;
219      $('body,html').stop().animate({scrollTop:position}, speed, 'swing');
220    }, 1000);
221  }
222
223  $('a[href]').click(function(e) {
224    var anchor = $(this),
225    href = anchor.attr('href'),
226    pagename = window.location.href;
227    pagename = pagename.replace(/#.*/,'');
228
229    href = href.replace( pagename , '' );
230
231    if( href.search(/^#/) >= 0 ){
232      e.preventDefault();
233
234      // eslint-disable-next-line quotes
235      var target = $(href == "#" || href == "" ? 'html' : href);
236      var position = target.offset().top - hHeight;
237      $('html, body').animate({scrollTop:position}, speed, 'swing');
238
239      location.hash = href;
240      return false;
241    }
242  })
243
244});
245
246
247function is_mobile() {
248  if (
249    (navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) ||
250    navigator.userAgent.indexOf('iPod') > 0 ||
251    navigator.userAgent.indexOf('Android') > 0
252  ) {
253    return true;
254  }
255  else {
256    return false;
257  }
258}
259
260
261function getParam(name, url) {
262  if (!url) url = window.location.href;
263  name = name.replace(/[[]]/g, '\\$&');
264  var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
265      results = regex.exec(url);
266  if (!results) return null;
267  if (!results[2]) return '';
268  return decodeURIComponent(results[2].replace(/\+/g, ' '));
269}
270
271
272function loadContents() {
273
274  var content_show_timeout = ( location.hash && $(location.hash)[0] ) ? 300 : 500;
275  var animate_start_timeout = ( location.hash && $(location.hash)[0] ) ? 300 : 200;
276
277  setTimeout(function() {
278
279    $('body').attr('data-status', 'loaded');
280		// $('.l-loader').addClass('is-loaded');
281
282  }, content_show_timeout);
283
284  setTimeout(function() {
285
286    var timer = false;
287    $(window).on('scroll', function () {
288
289      eachAnimate();
290
291      if( timer !== false ){
292        clearTimeout( timer );
293      }
294
295      timer = setTimeout( function() {
296        eachAnimate();
297      }, 400 );
298
299    });
300
301    eachAnimate();
302    setTimeout( function() {
303      eachAnimate();
304    }, 400 );
305
306    if( $('.js-main-visual-slide')[0] && $('.p-main-visual-img-slide.swiper-slide').length > 1) {
307
308      // eslint-disable-next-line no-undef
309      var mainVisualSwiper = new Swiper('.js-main-visual-slide .swiper-container', {
310        effect: 'fade',
311        fadeEffect: {
312          crossFade: true,
313        },
314        loop: true,
315        slidesPerView: 1,
316        speed: 2000,
317        autoplay: {
318          delay: 3000,
319        },
320        // noSwiping: true,
321        // on: {
322        //   slideChange: function () {
323        //     var mainTitle = $('.js-main-visual-ttl');
324        //     var classList = this.slides[this.activeIndex].classList.value;
325        //     mainTitle.removeClass('is-white');
326        //     if (classList && classList.indexOf('swiper-slide-white') >= 0) {
327        //       mainTitle.addClass('is-white');
328        //     }
329        //   },
330        // },
331      });
332
333    }
334
335    if( $('.js-index-blog')[0] && $('.p-index-blog-item.swiper-slide').length > 1) {
336
337      // eslint-disable-next-line no-undef
338      var indexBlogSwiper = new Swiper('.js-index-blog.swiper-container', {
339        effect: 'slide',
340        // loop: true,
341        slidesPerView: 'auto',
342        speed: 500,
343        // spaceBetween: 30,
344        // autoplay: {
345        //   delay: 3000,
346        // },
347        mousewheelControl: false,
348        scrollbar: { 
349          el: '.swiper-scrollbar', //要素の指定
350          draggable: true,
351          dragSize: 'auto',
352        },
353        //mousewheel: {
354        //  invert: false,
355        //},
356      });
357
358    }
359
360    // var window_width = window.innerWidth;
361    // var plan_item_height = 0;
362
363
364    afterLoadFile('https://fonts.googleapis.com/css?family=Lato:400,700&display=swap', 'css');
365    afterLoadFile('https://use.fontawesome.com/releases/v6.4.2/css/all.css', 'css');
366
367  }, animate_start_timeout);
368
369}
370
371
372
373function eachAnimate() {
374  $('.js-animate').each(function () {
375    var pos = $(this).offset().top;
376    var h = $(window).height();
377    var offset = ($(this).data('offset')) ? $(this).data('offset') : 200;
378    var scrollTop = $(window).scrollTop() + offset;
379    if (scrollTop > pos - h / 1.5) {
380      $(this).addClass('is-active');
381      $(this).removeClass('js-animate');
382    }
383  });
384}
385
386
387function afterLoadFile(src, type) {
388
389  if( type == 'js' ) {
390    $('body').append('<script src="'+src+'"></script>');
391  }
392
393  else if( type == 'css' ) {
394    $('body').append('<link rel="stylesheet" href="'+src+'">');
395  }
396
397  else {
398    return false;

399  }
400
401}
402
403/* loading
404  */
405var bar = new ProgressBar.Line(loading, {
406  // strokeWidth: 4,
407  easing: 'easeInOut',
408  duration: 1400,
409  // trailColor: '#eee',
410  trailWidth: 1,
411  svgStyle: {width: '100%', height: '1px'}
412});
413
414setTimeout(function() {
415  bar.animate(1.0);
416}, 500);
417
418
419// youtube trim
420// 上下左右の黒帯
421var $WIN = $(window);
422
423function screen_fit () {
424    const WIN_H = $WIN.height();
425    const WIN_W = $WIN.width();
426    const screen_switch = 0.5625; // 16:9
427    const screen_ratio = WIN_H / WIN_W; // window 高さ/幅
428    const ratio_H = WIN_H / screen_switch; // window 高さ/縦横比
429    const ratio_W = WIN_W * screen_switch; // window 幅*縦横比
430
431    if (screen_ratio > screen_switch) {
432        // 16:9より幅の方が小さい
433        $('#player').css({
434            height: '100%',
435            width: ratio_H,
436        });
437    } else {
438        $('#player').css({
439          // 16:9より高さの方が小さい時
440            width: '100%',
441            height: ratio_W,
442        });
443    }
444}
445
446$WIN.on("resize", function () {
447  screen_fit();
448});
449
450$(function () {
451    screen_fit ();
452});
453
454// $('.p-gnav-item-link.is-active').each(function () {
455//   var url = $(this).attr('href');
456//   var hash = $(this).location.hash;
457//   console.log(url+'aAA');
458//   $(this).attr("href", hash);
459// });
460
461
462// $('.p-gnav-item-link.is-active').on('click',function(){
463// 	if($(this).attr('href').indexOf('#')){
464// 		$('body').attr('data-menu', '');
465// 		$('body').attr('data-bodyfixed', 'false');
466// 	}
467// })