https://www.hakujuji.co.jp/js/home_video.js

1/*
2 * ホーム用 JavaScript
3 * 共用ファイルを読み込んでから使う
4 * 依存: グローバル変数 isPC, isSP, rewinding
5 */
6(function($) {
7
8  // ---------------------------------------------------------------------------
9  // Slick
10  // フロントページ トップPC
11
12  $video = $('#slickVideo').get(0);
13  $PCSlider = $('.slickPC').slick({
14    speed: 700,
15    infinite: true,
16    arrows: false,
17    dots: false,
18    autoplay: true,
19    autoplaySpeed: 7000,
20    pauseOnHover: false,
21    pauseOnFocus: false
22  }).on('afterChange', function(event, slick, currentSlide, nextSlide){
23        if(currentSlide == 0) {
24          $video.play();
25        } else {
26          $video.pause();
27          $video.currentTime = 0;
28          $PCSlider.slick('slickPlay');
29        }
30      });
31
32  $video.addEventListener("play", function() {
33    $PCSlider.slick('slickPause');
34  });
35
36  $video.addEventListener("ended", function() {
37    $PCSlider.slick('slickNext');
38  });
39
40  // サムネイル初期値
41  $('.heroPCThumbs button').eq(0).addClass('isActive');
42
43  $('.slickPC').on('beforeChange', function(event, slick, currentSlide, nextSlide){
44    $('.heroPCThumbs button').eq(currentSlide).removeClass('isActive');
45    $('.heroPCThumbs button').eq(nextSlide).addClass('isActive');
46  });
47
48  // Slick Thumbnails
49  $('.heroPCThumbs button').on('click', function(e){
50    var idx = $('.heroPCThumbs button').index(this);
51    $('.slickPC').slick('slickGoTo', idx);
52  });
53
54  /// フロントページ トップSP
55  $('.slickSP').on('init', function(e, slick){
56    setTimeout( function() { $('.switcherSP').animate({'opacity': 1}, 1000 ); }, 800 );
57  });
58  $('.slickSP').slick({
59    speed: 300,
60    arrows: true,
61    dots: true,
62    autoplay: true,
63    autoplaySpeed: 7000
64  });
65
66  /// フロントページ PICKUP
67  $('.secPickupCarousel ul').slick( {
68    speed: 300,
69    infinite: true,
70    arrows: true,
71    touchThreshold: 20,
72    slidesToShow: 4,
73    slidesToScroll: 1 
74  });
75
76  // ---------------------------------------------------------------------------
77  // 分岐展開処理
78  // 条件
79  // 1) 両方開いていない - > そのまま展開
80  // 2) 片方開いて同じものをクリック -> そのまま閉じる
81  // 3) 片方開いて別な方をクリック -> 元のをフェードアウト -> 別な方をフェードイン
82  //
83  var separatorIsAnimating = false; // 開閉中（操作無効）
84
85  $('.switcherHome,.switcherSPHome').on('click', function(e){ // 家庭向けのクリック
86
87    if ( separatorIsAnimating ) return false;
88    separatorIsAnimating = true;
89
90    // どちらも開いていない
91    if ( $('.switcherHome').hasClass('isOpened') == false && $('.switcherMed').hasClass('isOpened') == false ) {
92
93      $('.switcherHome').addClass('isOpened');
94      $('.switcherSPHome').addClass('isOpened');
95
96      // 上ボーダー手前に出す
97      $('.switchBorderHome').css('z-index','1');
98      $('.switchBorderMed').css('z-index','0');
99
100      // 上ボーダー表示
101      $('.switchBorderHomeLeft,.switchBorderHomeRight').removeAttr('style');
102
103      var borderDuration = 200;
104      if (isSP) borderDuration = 0; // SPはボーダーアニメーションいらない
105
106      $('.switchBorderHomeInner').animate(
107        { 'width': '100%' },
108        { 'duration': borderDuration,
109          'easing': 'easeOutQuart'}).promise().then(
110        function() {
111          // からのコンテンツ展開
112          $('.contentHome').slideDown( 600, function(){
113            // SPのときはSVGを遷移
114            if (isSP) homeLock();
115            separatorIsAnimating = false;
116          });
117          // 上ボーダーの隙間を埋める（閉じるときにホバーしていないと隙間が見える）
118          $('.switchBorderHomeLeft,.switchBorderHomeRight').css({'left':0, 'right':0});
119
120          // コンテンツ見えるようにスクロール
121          scrollToContentTop();
122        });
123
124    } else // 片方が開いている
125    if ( $('.switcherHome').hasClass('isOpened') == false &&
126         $('.switcherMed').hasClass('isOpened')) {
127
128      $('.switcherMed').removeClass('isOpened');
129      $('.switcherSPMed').removeClass('isOpened');
130
131      $('.switchBorderMedInner').fadeOut( 200, function(){
132        $('.switchBorderMedInner').removeAttr('style');
133      });
134      $('.contentMed').fadeOut( 200, function(){
135        $('.contentMed').removeAttr('style').removeClass('isOpened');
136

137        // 対象をフェードイン
138        $('.switcherHome').addClass('isOpened');
139        $('.switcherSPHome').addClass('isOpened');
140
141        $('.switchBorderHomeLeft,.switchBorderHomeRight').removeAttr('style');
142        $('.switchBorderHomeInner').animate(
143          { 'width': '100%' },
144          { 'duration': 300,
145            'easing': 'easeOutQuart'} );
146        $('.contentHome').fadeIn( 600, function(){
147          // SPのときはSVGを遷移
148          if (isSP) { homeLock(); medReset(); }
149           separatorIsAnimating = false;
150        });
151        // コンテンツ見えるようにスクロール
152        scrollToContentTop();
153      });
154    } else { // 自分が開いている
155      $('.switcherHome').removeClass('isOpened');
156      $('.switcherSPHome').removeClass('isOpened');
157
158      $('.contentHome').slideUp( 500, function(){
159        $('.switchBorderHomeInner').removeAttr('style');
160        if (isSP) homeReset();
161        separatorIsAnimating = false;
162      });
163    }
164  });
165
166  // 医療用のクリック
167  $('.switcherMed,.switcherSPMed').on('click', function(e){
168
169    if ( separatorIsAnimating ) return false;
170    separatorIsAnimating = true;
171
172    // どちらも開いていない
173    if ( $('.switcherMed').hasClass('isOpened') == false &&
174         $('.switcherHome').hasClass('isOpened') == false ) {
175
176      $('.switcherMed').addClass('isOpened');
177      $('.switcherSPMed').addClass('isOpened');
178
179      // 上ボーダー手前に出す
180      $('.switchBorderMed').css('z-index','1');
181      $('.switchBorderHome').css('z-index','0');
182
183      // 上ボーダー表示
184      $('.switchBorderMedLeft,.switchBorderMedRight').removeAttr('style');
185
186      var borderDuration = 200;
187      if (isSP) borderDuration = 0; // SPはボーダーアニメーションいらない
188
189      $('.switchBorderMedInner').animate(
190        { 'width': '100%' },
191        { 'duration': borderDuration,
192          'easing': 'easeOutQuart'}).promise().then(
193        function() {
194          // からのコンテンツ展開
195          $('.contentMed').slideDown( 600, function(){
196            // SPのときはSVGを遷移
197            if (isSP) medLock();
198            separatorIsAnimating = false;
199          });
200          // 上ボーダーの隙間を埋める（閉じるときにホバーしていないと隙間が見える）
201          $('.switchBorderMedLeft,.switchBorderMedRight').css({'left':0, 'right':0});
202
203          // コンテンツ見えるようにスクロール
204          scrollToContentTop();
205
206        });
207    } else // 片方が開いている
208    if ( $('.switcherMed').hasClass('isOpened') == false && $('.switcherHome').hasClass('isOpened')) {
209
210      $('.switcherHome').removeClass('isOpened');
211      $('.switcherSPHome').removeClass('isOpened');
212
213      $('.switchBorderHomeInner').fadeOut( 200, function(){
214        $('.switchBorderHomeInner').removeAttr('style');
215      });
216      $('.contentHome').fadeOut( 200, function(){
217        $('.contentHome').removeAttr('style').removeClass('isOpened');
218
219        // 対象をフェードイン
220        $('.switcherMed').addClass('isOpened');
221        $('.switcherSPMed').addClass('isOpened');
222
223        $('.switchBorderMedLeft,.switchBorderMedRight').removeAttr('style');
224        $('.switchBorderMedInner').animate(
225          { 'width': '100%' },
226          { 'duration': 300,
227            'easing': 'easeOutQuart'} );
228        $('.contentMed').fadeIn( 600, function(){
229
230          // SPのときはSVGを遷移
231          if (isSP) { medLock(); homeReset(); }
232           separatorIsAnimating = false;
233        });
234        // コンテンツ見えるようにスクロール
235        scrollToContentTop();
236      });
237    } else { // 自分が開いている
238      $('.switcherMed').removeClass('isOpened');
239      $('.switcherSPMed').removeClass('isOpened');
240
241      $('.contentMed').slideUp( 500, function(){
242        $('.switchBorderMedInner').removeAttr('style');
243        if (isSP) medReset();
244        separatorIsAnimating = false;
245      });
246    }
247  });
248
249  // 展開時のスクロール
250  function scrollToContentTop() {
251    rewinding = true;
252    if ( isPC ) {
253      $('body,html').animate(

254        { scrollTop: $('.switchBorder').offset().top - $('#homeSVG').height()- $('.headerRow').height() + 20 },
255        { duration: 800, easing: 'easeInOutCubic'} ).promise().then(
256        function() {
257          rewinding =false;
258        }
259      );
260    } else {
261      $('body,html').animate(
262        { scrollTop: $('.switcherSP').offset().top - 60 },
263        { duration: 800, easing: 'easeOutCubic'} ).promise().then(
264        function() {
265          rewinding =false;
266        }
267      );
268    }
269  }
270
271  // ---------------------------------------------------------------------------
272  // 初期化、イベント割り当て
273
274  // 初期化時にPCなら動画を仕込む
275  if ( isPC ) {
276    $('#slickVideo').attr('src', 'top.mp4');
277    var video = document.querySelector('#slickVideo');
278    video.addEventListener('loadstart', function(){
279      $('.slickPC').addClass('isVisible');
280      $('.heroPCThumbs').addClass('isVisible');
281      $('.withSlogan').addClass('isVisible');
282    });
283
284    // var carouselMoved = false; // 自動で動かすのは1回だけ
285    // video.addEventListener('ended', function(){
286    //   if ( carouselMoved === false ) { // 動画の再生完了でスライド動かす
287    //     setTimeout( function(){ $('.slickPC').slick('slickGoTo', 1) }, 500 );
288    //   }
289    //   this.play();
290    // });
291    //
292    // $('.slickPC').on('afterChange', function(){
293    //   carouselMoved = true;
294    // });
295
296  } else {
297    // PCでない場合は画像にする
298    $('#slickVideo').attr('poster', 'image/no-video.jpg');
299    $('.slickPC').addClass('isVisible');
300    $('.heroPCThumbs').addClass('isVisible');
301    $('.withSlogan').addClass('isVisible');
302  }
303
304  // お知らせのもっと見る切り替え
305  $('.secNewsMore').on('click', function(e){
306    $( this ).animate({height:"0", opacity: "0"}, 150, function(e){
307      $('.secNewsBottom').slideDown( 700, 'easeInOutCubic' );
308
309    });
310  });
311
312
313  //----------------------------------------------------------------------------
314  // SVGアニメーション
315  SVGEASING = mina.easeout;
316  SVGDURATION = 150;
317
318  // HOME
319  var // 各パス　BGpath1: 変形前背景  BGpath2: 変形後背景 BGpath3: ロック後背景  BDR*:ボーダー
320    homeBGpath1 = "M115,2 L60,55 L60 125 L171,125 L171,55 L115,2z M96,74h0h0h0h0z M116,74h0h0h0h0z M135,74h0h0h0h0z",
321    homeBGpath2 = 'M115,2 L1,74 L1 196 L229,196 L229,74 L115,2z M91,124h-30v-30h30v30z M131,124h-30v-30h30v30z M171,124h-30v-30h30v30z',
322    homeBGpath3 = 'M115,2 L1,74 L1 196 L229,196 L229,74 L115,2z M91,124h-30v-0h30v0z M131,124h-30v-0h30v0z M171,124h-30v-0h30v0z',
323    homeBDR1    = 'M115,125 L60,125 L60,55 L115,2 L171,55 L171,125 L115,125',
324    homeBDR2    = 'M1,195 L1,195 L1,74 L115,2 L229,74 L229,195 L229,195',
325    homeOpened = false;
326
327  var $homeBGG =    Snap( '#homeBGG' );
328  var $homeBG =     Snap( '#homeBG' );
329  var $homeBDR =    Snap( '#homeBDR' );
330  var $homeArrow =  Snap( '#homeArrow' );
331  var $homeDots =   Snap(' #homeDots');
332
333  // イベントハンドラ割り当てはjQueryを使用
334  $('#homeSVG').on('mouseenter', function() {
335    if ( isSP ) { // スマホの時はhover関連オフ
336      e.preventDefault();
337      e.stopPropagation();
338      return false;
339    }
340    if ( !homeOpened ) {
341      homeHover();
342    }
343  });
344  $('#homeSVG').on('mouseleave', function(){
345    if ( isSP ) { // スマホの時はhover関連オフ
346      e.preventDefault();
347      e.stopPropagation();
348      return false;
349    }
350    if ( !homeOpened ) {
351     homeReset() ;
352    }
353  });
354  $('#homeSVG').on('click', function() {
355    // 開閉中は動かさない
356    if ( separatorIsAnimating ) {
357      return;
358    }
359    if ( !homeOpened ) {
360      if ( medOpened ) {
361        medReset();
362      }
363      homeLock();
364    } else {
365      if ( isSP ) {
366        homeReset(); // スマホは元に戻す
367      } else {
368        homeUnlock(); // PCはホバー状態に戻す
369      }
370    }
371  });
372
373  function homeLock() {
374    homeOpened = true;
375    $homeArrow.attr( { 'visibility': 'hidden', 'transform': 'translate(95.5,196)' } );
376    $homeBG.attr( 'class', 'isOpened');
377    $homeBG.attr( 'fill-opacity',"1");
378    $homeBG.animate( {'d': homeBGpath3 }, SVGDURATION, mina.backout );
379    $homeBDR.attr( { 'd': homeBDR2, 'stroke-width':"2" } );
380    $homeDots.animate({ 'transform':'translate(0,10)'}, SVGDURATION, mina.backout);
381  }
382
383  function homeUnlock() {
384    homeOpened = false;

385    $homeArrow.attr( { 'visibility': 'visible', 'transform': 'translate(95.5,196)' } );
386    $homeBG.attr( 'fill-opacity','.7');
387    $homeBG.attr( 'class','');
388
389    $homeBG.animate({'d': homeBGpath2}, SVGDURATION, mina.backout );
390    $homeDots.animate({'transform':'translate(0,0)'}, SVGDURATION, mina.backout);
391  }
392
393  function homeHover() {
394    $homeBG.animate( { 'd': homeBGpath2 }, SVGDURATION, SVGEASING );
395    $homeBDR.animate( { 'd': homeBDR2, 'stroke-width':"2"  }, SVGDURATION, SVGEASING );
396    $homeArrow.animate( { 'transform': 'translate(95,196)' }, SVGDURATION, SVGEASING );
397  }
398
399  function homeReset() { // 初期状態に戻す
400    $homeBG.attr("class","");
401    $homeBG.attr("fill-opacity", ".7");
402    $homeBG.animate( { 'd': homeBGpath1 }, SVGDURATION, SVGEASING );
403    $homeBDR.animate( { 'd': homeBDR1, 'stroke-width':"4"}, SVGDURATION, SVGEASING );
404    $homeArrow.animate( { 'transform': 'translate(95.5,76)' }, SVGDURATION, SVGEASING );
405    $homeDots.animate({'transform':'translate(0,0)'}, SVGDURATION, SVGEASING );
406    setTimeout( function() { $homeArrow.attr( {visibility: "visible"} )}, SVGDURATION );
407    homeOpened = false;
408  }
409
410  // MED
411  var
412    medBGpath1 = 'M134,2 L134,41 L104,41 L104,125 L216,125 L216,41 L186,41 L186,2z  M142, 85 h-0v-0h0v0z M142, 70 h-0v-0h0v0z M148,85 h-0v-0h0v0z M148, 70 h-0v-0h0v0z M156,85 h-0v-0h0v0z M156, 70 h-0v-0h0v0z M164,85 h-0v-0h0v0z M164, 70 h-0v-0h0v0z M172,85 h-0v-0h0v0z M172, 70 h-0v-0h0v0z M180,85 h-0v-0h0v0z M180, 70 h-0v-0h0v0z',
413    medBGpath2 = 'M134,2 L134,41 L1,41 L1,196 L319,196 L319,41 L186,41 L186,2z M87,115 h-20v-20h20v20z M87, 83 h-20v-20h20v20z M120,115 h-20v-20h20v20z M120, 83 h-20v-20h20v20z M153,115 h-20v-20h20v20z M153, 83 h-20v-20h20v20z M186,115 h-20v-20h20v20z M186, 83 h-20v-20h20v20z M219,115 h-20v

413-20h20v20z M219, 83 h-20v-20h20v20z M252,115 h-20v-20h20v20z M252, 83 h-20v-20h20v20z',
414    medBGpath3 = 'M116,2 L116,71 L1,71 L1,196 L319,196 L319,71 L204,71 L204,2z M87,115 h-20v0h20v0z M87, 83 h-20v-0h20v0z M120,115 h-20v0h20v0z M120, 83 h-20v0h20v0z M153,115 h-20v0h20v0z M153, 83 h-20v0h20v0z M186,115 h-20v0h20v0z M186, 83 h-20v0h20v0z M219,115 h-20v0h20v0z M219, 83 h-20v0h20v0z M252,115 h-20v0h20v0z M252, 83 h-20v0h20v0z',
415    medBDR1 ='M160,125 L216,125 L216,41 L186,41 L186,2 L134,2 L134,41 L104,41 L104,125 L160,125',
416    medBDR2 ='M319,195 L319,195 L319,41 L186,41 L186,2 L134,2 L134,41 L1,41 L1,195 L1,195',
417    medBDR3 ='M319,195 L319,195 L319,71 L204,71 L204,2 L116,2 L116,71 L1,71 L1,195 L1,195',
418    medOpened = false;
419
420  var $medBGG = Snap( '#medBGG' );
421  var $medBG = Snap( '#medBG' );
422  var $medBDR = Snap( '#medBDR' );
423  var $medArrow = Snap( '#medArrow' );
424  var $medDots = Snap('#medDots');
425
426  $('#medSVG').on('mouseenter', function(e){
427    if ( isSP ) { // スマホの時はhover関連オフ
428      e.preventDefault();
429      e.stopPropagation();
430      return false;
431    }
432    if ( !medOpened ) {
433      medHover();
434    }
435  });
436
437  $('#medSVG').on('mouseleave', function(){
438    if ( isSP ) { // スマホの時はhover関連オフ
439      e.preventDefault();
440      e.stopPropagation();
441      return false;
442    }
443
444    if ( !medOpened ) {
445      medReset();
446    }
447  });
448
449  $('#medSVG').on('click', function() {
450
451    // 開閉中は動かさない
452    if ( separatorIsAnimating ) {
453      return;
454    }
455
456    if ( !medOpened ) {
457      if ( homeOpened ) {
458        homeReset();
459      }
460      medLock();
461    } else {
462      if ( isSP ) {
463        medReset(); // スマホは元に戻す
464      } else {
465        medUnlock(); // PCはホバー状態に戻す
466      }
467    }
468  });
469
470  function medHover() { // ホバー
471    $medBG.animate( { 'd': medBGpath2 }, SVGDURATION, SVGEASING );
472    $medBDR.animate( { 'd': medBDR2, 'stroke-width':"2"  }, SVGDURATION, SVGEASING );
473    $medArrow.animate( { 'transform': 'translate(140,196)' }, SVGDURATION, SVGEASING );
474  }
475
476  function medLock() { // クリックしてロック
477    medOpened = true;
478    $medArrow.attr( { 'visibility': "hidden", 'transform': 'translate(140,196)' } );
479    $medBG.attr("class", "isOpened");
480    $medBG.attr("fill-opacity", "1");
481    $medDots.animate({'transform':'translate(0,13)'}, SVGDURATION, mina.backout);
482    $medBDR.animate( { 'd': medBDR3, 'stroke-width':"2" }, SVGDURATION, mina.backout );
483    $medBG.animate( {'d': medBGpath3 }, SVGDURATION, mina.backout );
484  }
485
486  function medUnlock() { // アンロック
487    medOpened = false;
488    $medArrow.attr( { 'visibility': "visible", 'transform': 'translate(140,196)' } );
489    $medBG.attr("class","");
490    $medBG.attr("fill-opacity", ".7");
491    $medBG.animate( {'d': medBGpath2}, SVGDURATION, mina.backout );
492    $medBDR.animate( {'d': medBDR2}, SVGDURATION, mina.backout );
493    $medDots.animate({'transform':'translate(0,0)'}, SVGDURATION, mina.backout);
494  }
495
496  function medReset() { // 初期状態に戻す
497    $medBG.attr("class","");
498    $medBG.attr("fill-opacity", ".7");
499    $medBG.animate( { 'd': medBGpath1 }, SVGDURATION, SVGEASING );
500    $medBDR.animate( { 'd': medBDR1, 'stroke-width':"4"}, SVGDURATION, SVGEASING );
501    $medArrow.animate( { 'transform': 'translate(140,76)' }, SVGDURATION, SVGEASING );
502    $medDots.animate({'transform':'translate(0,0)'}, SVGDURATION, SVGEASING );
503    setTimeout( function() { $medArrow.attr( {visibility: "visible"} )}, SVGDURATION );
504    medOpened = false;
505  }
506
507  // 分岐SVG表示
508  setTimeout( function(){ $('.switcher').fadeIn(); }, 1000 );
509
510})(jQuery);