https://www.dolphin-ah.co.jp/js/main.js

1$(window).on('load', function() {
2  window.loaded = true;
3  $('.slide').addClass('loaded');
4});
5
6
7$(function(){
8
9  // 固定メニュー開閉
10  var headerH = $('.g-header').outerHeight(true);
11  var fixedNavOpen = 0;
12  var windowX = $(window).width();
13  
14  function scrollOpen() {
15    var scroll = $(window).scrollTop();
16    if((scroll >= headerH) && (fixedNavOpen == 0)){
17      $('.fixed-nav').removeClass('active');
18      fixedNavOpen = 1;
19    }
20  }
21
22  $(window).scroll(function() {
23    scrollOpen();
24  });
25
26  if(windowX <= 1080){
27    $('.fixed-nav').removeClass('active');
28  }
29
30  $('.fixed-nav').find('.fixed-nav__find').on('click',function(){
31    $('.fixed-nav').toggleClass('active');
32  });
33
34  $('.f-nav__link-layer span').on('click',function(){
35    $(this).parents('.f-nav__link-layer').toggleClass('open');
36  });
37
38
39  $.fn.infiniteslide = function(options){
40    //option
41    var settings = $.extend({
42      'speed': 100, //速さ　単位はpx/秒です。
43      'direction': 'left', //up/down/left/rightから選択
44      'pauseonhover': true, //マウスオーバーでストップ
45      'responsive': false, //子要素の幅を%で指定しているとき
46      'clone': 1
47    },options);
48    
49    var setCss = function(obj,direction){
50      $(obj).wrap('<div class="infiniteslide_wrap"></div>').parent().css({
51        overflow: 'hidden'
52      });
53
54      if(direction == 'up' || direction == 'down'){
55        var d = 'column';
56      } else {
57        var d = 'row';
58      }
59              
60      $(obj).css({
61        display: 'flex',
62        flexWrap: 'nowrap',
63        alignItems: 'center',
64        '-ms-flex-align': 'center',
65        flexDirection: d
66      }).children().css({
67          flex: 'none',
68          display: 'block'
69        });
70    }
71    
72    var setClone = function(obj,clone){
73      var $clone = $(obj).children().clone(true).addClass('infiniteslide_clone');
74      var i = 1;
75      while(i <= clone){
76        $clone.clone(true).appendTo($(obj));
77        i++;
78      }
79    }
80    
81    var getWidth = function(obj){
82      var w = 0;
83      $(obj).children(':not(.infiniteslide_clone)').each(function(key,value){
84        w = w + $(this).outerWidth(true);
85      });
86      return w;
87    }
88    var getHeight = function(obj){
89      var h = 0;
90      $(obj).children(':not(.infiniteslide_clone)').each(function(key,value){
91        h = h + $(this).outerHeight(true);
92      });
93      return h;
94    }
95
96    
97    var getSpeed = function(l,s){
98      return l / s;
99    }
100    var getNum = function(obj,direction){
101      var num = 0;
102      if(direction == 'up' || direction == 'down'){
103        num = getHeight(obj);
104      } else {
105        num = getWidth(obj);
106      }
107      return num;
108    }
109    
110    var getTranslate = function(num,direction){
111      if(direction == 'up' || direction == 'down'){
112        var i = '0,-' + num + 'px,0';
113      } else {
114        var i = '-' + num + 'px,0,0';
115      }
116      return i;
117    }
118    
119    var setAnim = function(obj,id,direction,speed){
120      var num = getNum(obj,direction);
121      if(direction == 'up' || direction == 'down'){
122        $(obj).parent('.infiniteslide_wrap').css({
123          height: num + 'px'
124        });
125      }
126      var i = getTranslate(num,direction);
127      
128      $(obj).attr('data-style','infiniteslide' + id);
129
130      var css = '@keyframes infiniteslide' + id + '{' + 
131              'from {transform:translate3d(0,0,0);}' + 
132              'to {transform:translate3d(' + i + ');}' + 
133            '}';
134      $('<style />').attr('id','infiniteslide' + id + '_style')
135      .html(css)
136      .appendTo('head');
137      
138      if(direction == 'right' || direction == 'down'){
139        var reverse = ' reverse';
140      } else {
141        var reverse = '';
142      }
143      
144      $(obj).css({
145        animation: 'infiniteslide' + id + ' ' + getSpeed(num,speed) + 's linear 0s infinite' + reverse
146      });
147    }
148    var setStop = function(obj){
149      $(obj).on('mouseenter',function(){
150        $(this).css({
151          animationPlayState: 'paused'
152        });
153      }).on('mouseleave',function(){
154        $(this).css({
155          animationPlayState: 'running'
156        });
157      });
158    }
159    
160    var setResponsive = function(obj,direction){
161      var num = getNum(obj,direction);
162      var i = getTranslate(num,direction);
163      return i;
164    };
165    return this.each(function(key,value){
166      var $this = $(this);
167      var num = Date.now() + Math.floor(10000*Math.random()).toString(16);
168      if(settings.pauseonhover == true){
169        setStop($this);
170      }
171      var _onload = function(){
172        setCss($this,settings.direction);
173        setClone($this,settings.clone);
174        setAnim($this,num,settings.direction,settings.speed);
175        
176        if(settings.responsive){
177          $(window).on('resize',function(){
178            var i = setResponsive($this,settings.direction);
179            var styleid = $this.attr('data-style');
180            var stylehtml = $('#' + styleid + '_style').html();
181            
182            var stylehtml_new = stylehtml.replace(/to {transform:translate3d\((.*?)\)/,'to {transform:translate3d(' + i + ')');
183            $('#' + styleid + '_style').html(stylehtml_new);
184
185          });
186        }
187      };
188
189      if (window.loaded) {
190        _onload();
191      } else {
192        $(window).on('load', _onload);
193      }
194    });
195    
196  }
197
198  $('.slide').infiniteslide({
199    speed: 40,
200    pauseonhover: false
201  });
202
203  $('.g-nav__has-sub').on('mouseenter',function(){
204    $(this).children('.g-nav__sub').addClass('open');
205  });
206  $('.g-nav__has-sub').on('mouseleave',function(){
207    $(this).children('.g-nav__sub').removeClass('open');
208  });
209  $('.g-nav__has-sub').on('touchstart',function(){
210    $(this).children('.g-nav__sub').addClass('open');
211  });
212  $('.g-nav__has-sub').on('touchend',function(){
213    $(this).children('.g-nav__sub').removeClass('open');
214  });
215
216  $('.g-nav__mega-button').on('click',function(){
217    $('.mega-nav').toggleClass('mega-nav--open');
218  });
219
220  $('.g-nav__mega-button').on('mouseenter',function(){
221    $('.mega-nav').addClass('mega-nav--open');
222    $('.mega-nav__filter').addClass('open');
223  });
224  $('.g-nav__mega-button').on('mouseleave',function(){
225    $('.mega-nav').removeClass('mega-nav--open');
226    $('.mega-nav__filter').removeClass('open');
227  });
228  $('.g-nav__mega-button').on('touchstart',function(){
229    $('.mega-nav').addClass('mega-nav--open');
230    $('.mega-nav__filter').addClass('open');
231  });
232  $('.g-nav__mega-button').on('touchend',function(){
233    $('.mega-nav').removeClass('mega-nav--open');
234    $('.mega-nav__filter').removeClass('open');
235  });
236
237
238  // スマホナビゲーション
239
240  var drawer = false;

241  var scrollPosition;
242
243  $('.sp-nav-btn__reservation').on('click',function(){
244    scrollPosition = $(window).scrollTop();
245    $('.sp-nav-reservation').addClass('sp-nav-open');
246    $("body").addClass("nav-open").css({'top': -scrollPosition});
247    drawer = true;
248  });
249
250  $('.sp-nav-reservation-close').on('click',function(){
251    $('.sp-nav-reservation').removeClass('sp-nav-open');
252    $("body").removeClass("nav-open").css({'top': 0});
253    window.scrollTo(0, scrollPosition);
254    drawer = false;
255  });
256
257  $('.sp-nav-btn__drawer-nav').on('click',function(){
258    scrollPosition = $(window).scrollTop();
259    $('.sp-nav-main').addClass('sp-nav-open');
260    $("body").addClass("nav-open").css({'top': -scrollPosition});
261    drawer = true;
262  });
263
264  $('.sp-nav-main-close').on('click',function(){
265    $('.sp-nav-main').removeClass('sp-nav-open');
266    $("body").removeClass("nav-open").css({'top': 0});
267    window.scrollTo(0, scrollPosition);
268    drawer = false;
269  });
270
271
272  // トップ お知らせタブメニュー
273
274  $('.top-information__cat-nav').on('click', 'li',function(){
275    if(!($(this).hasClass('--current'))){
276      $('.top-information__cat-nav').find('.--current').removeClass('--current');
277      var tab = $(this).attr('class');
278      $('.top-information__list').removeClass('--active');
279      $('.top-information__list.'+tab).addClass('--active');
280      $(this).addClass('--current');
281    } 
282  });
283
284
285  // 予約受付開閉
286
287  var scrollPosition;
288  $('.sp-nav__tel').on('click',function(){
289    $('.reservation-modal__box').addClass('open');
290    $('.reservation-filter').addClass('open');
291    scrollPosition = $(window).scrollTop();
292    $("body").addClass("drawer-open").css({'top': -scrollPosition});
293  });
294
295  $('.reservation-filter').on('click', function(){
296    $("body").removeClass("drawer-open").css({'top': 0});
297    window.scrollTo(0, scrollPosition);
298    $('.reservation-modal__box').removeClass('open');
299    $('.reservation-filter').removeClass('open');
300  });
301
302  $('.reservation-modal__close').on('click', function(){
303    $("body").removeClass("drawer-open").css({'top': 0});
304    window.scrollTo(0, scrollPosition);
305    $('.reservation-modal__box').removeClass('open');
306    $('.reservation-filter').removeClass('open');
307  });
308
309
310  // 予約タブメニュー
311
312  var activeMenu;
313
314  $('.reservation-area__tab').find('li').on('click',function(){
315    if(!$(this).hasClass('active')){
316      activeMenu = $(this).attr('class');
317      activeMenu = activeMenu.replace('tab-','');
318      $('.reservation-area__tab').find('li').removeClass('active');
319      $('.reservation-area__inner').find('section').removeClass('active');
320      $(this).addClass('active');
321      $('.reservation-area__inner').find('.section-' + activeMenu).addClass('active');
322    }
323  });
324
325
326  var image1 = document.getElementsByClassName('top-about-image1');
327  new simpleParallax(image1, {
328    orientation: 'up',
329    scale: 1.25,
330    customWrapper: '.top-about-image--image1'
331  });
332
333  var image2 = document.getElementsByClassName('top-about-image2');
334  new simpleParallax(image2, {
335    orientation: 'up',
336    scale: 1.32,
337    customWrapper: '.top-about-image--image2'
338  });
339
340
341  // メインビジュアル
342
343  $('.slick').slick({
344    arrows: false,
345    fade: true,
346    autoplay: true,
347    autoplaySpeed: 5000,
348    swipe: false,
349    pauseOnFocus: false,
350    pauseOnHover: false,
351    pauseOnDotsHover: false,
352    waitForAnimate: false
353  }).on({
354    beforeChange: function(event,slick, currentSlide, nextSlide) {
355      $(".slick-slide", this).eq(currentSlide).addClass("stop-animation");
356      $(".slick-slide", this).eq(nextSlide).addClass("slide-animation");
357    },
358    afterChange: function() {
359      $(".stop-animation", this).removeClass("stop-animation slide-animation");
360    }
361  });
362
363  $('.slick-bg').slick({
364    arrows: false,
365    fade: true,
366    autoplay: true,
367    autoplaySpeed: 5000,
368    swipe: false,
369    pauseOnFocus: false,
370    pauseOnHover: false,
371    pauseOnDotsHover: false,
372    waitForAnimate: false
373  });
374
375
376  // 里親募集
377
378  $('.slick-parent-photo').on('init', function(event, slick) {
379    const $dots = $(slick.$dots);
380
381    $dots.find('button').each(function (i) {
382      $(this).attr('aria-label', (i + 1) + '枚目へ');
383    });
384  });
385
386  $('.slick-parent-photo').on('init afterChange', function(event, slick, currentSlide){
387    const $dots = $(slick.$dots);
388
389    var i = (typeof currentSlide === 'number') ? currentSlide : slick.currentSlide;
390
391    $dots.find('button').removeAttr('aria-current');
392    $dots.find('li').eq(i).find('button').attr('aria-current', 'true');
393  });
394
395
396  $('.slick-parent-photo').slick({
397    dots: true,

398    arrows: false,
399    autoplay: true,
400    slidesToShow: 3,
401    autoplaySpeed: 5000,
402    swipe: true,
403    pauseOnFocus: false,
404    pauseOnHover: false,
405    pauseOnDotsHover: false,
406    waitForAnimate: false,
407    responsive: [{
408        breakpoint: 639,
409        settings: {
410          slidesToShow: 1
411        }
412    }]
413  });
414
415  
416
417  $('#select-parent-state').on('change',function() {
418    if( $(this).val() ) {
419      window.location.href = $(this).val();
420    }
421  });
422
423
424  // 治療方針・ご挨拶
425
426  function aboutPageAnime(){
427    $('.about-anime-element').each(function(){
428      var elemPos = $(this).offset().top-32;
429      var scroll = $(window).scrollTop();
430      var windowHeight = $(window).height();
431      if (scroll >= elemPos - windowHeight){
432        $(this).addClass('element-appear');
433      }
434    }); 
435  }
436  
437  $(window).scroll(function(){
438    aboutPageAnime();
439  });
440
441  $(window).on('load', function(){
442    aboutPageAnime();
443  });
444
445
446  // サブナビゲーション
447
448  $('.sub-nav__find').on('click',function(){
449    $(this).toggleClass('--open');
450  });
451
452
453  // スタッフ絞り込み
454
455  $('.staff-treatment-list').find('li').on('click',function(){
456    if(!($(this).hasClass('active'))){
457      if($(this).hasClass('all-staff')){
458        $('.staff-list__list').addClass('active');
459        $('.staff-treatment-list').find('li').removeClass('active');
460        $(this).addClass('active');
461      }else{
462        var selectTreatment = $(this).find('span').text();
463        $('.staff-treatment-list').find('li').removeClass('active');
464        $('.staff-list__list.active').removeClass('active');
465        $(this).addClass('active');
466        $('.staff-list__list').each(function(){
467          var treatment = $(this).data('treatment');
468          if(treatment.indexOf(selectTreatment) != -1){
469            $(this).addClass('active');
470          }
471        });
472      }
473    }
474  });
475
476  $('.ect-case__toggle').on('click', function(){
477    $(this).parent('.ect-case').toggleClass('is-open');
478  });
479
480
481});
482