https://zuiun.jp/cms-v2/wp-content/themes/zuiun-architecture/assets/js/top.js?ver=1721987604

1//
2//  トップページ
3// =============================================
4
5//
6//  DOM読み込み時の発火
7// ---------------------------------------------
8window.addEventListener('DOMContentLoaded', () => {
9
10  //  動画の親取得
11  // ---------------------------------------------
12  const kvArea = document.querySelector('.pg-kvArea');
13
14  //  動画の自動再生
15  // ---------------------------------------------
16  const kvVideoElem = kvArea.querySelector('.pg-kvArea__video');
17  const kvInnerElem = kvArea.querySelector('.pg-kvArea__inner');
18
19  setTimeout( function() {
20    kvVideoElem.classList.add('js-loaded');
21    kvInnerElem.classList.add('js-loaded');
22
23    kvVideoElem.play();
24  }, 500);
25
26
27  //  動画を止めるボタン
28  // ---------------------------------------------
29  const kvVideoControllerArea = kvArea.querySelector('.pg-kvArea__videoControllerArea');
30  const kvVideoController = kvArea.querySelector('.pg-kvArea__videoController');
31  const kvVideoControllerInnerText = kvArea.querySelector('.pg-kvArea__videoController .screen-reader-text');
32
33  //ボタンの表示切替・マウス
34  kvVideoControllerArea.addEventListener('mouseenter', function(){
35    kvVideoControllerArea.classList.add('js-btnVisible');
36  });
37  kvVideoControllerArea.addEventListener('mouseleave', function(){
38    kvVideoControllerArea.classList.remove('js-btnVisible');
39  });
40  //ボタンの表示切替・タッチ
41  let isTouchMove = false;
42  let scrolledThreshold = window.innerHeight / 3;
43  kvVideoControllerArea.addEventListener('touchend', function(){
44    let scrolled = window.scrollY;
45
46    if( isTouchMove ) {
47      kvVideoControllerArea.classList.remove('js-btnVisible');
48      isTouchMove = false;
49    } else {
50      if( scrolled < scrolledThreshold ) {
51        kvVideoControllerArea.classList.add('js-btnVisible');
52        isTouchMove = true;
53      }
54    }
55  });
56
57  //再生停止の切り替え
58  kvVideoController.addEventListener('click', function(){
59    let isStopped = kvVideoController.classList.contains('js-stopped');
60    if( isStopped ) {
61      // 再生動作：止めるボタンに変更
62      kvVideoElem.play();
63      kvVideoController.classList.remove('js-stopped');
64      kvVideoControllerInnerText.innerText = '動画を停止';
65    } else {
66      // 停止動作：再生するボタンに変更
67      kvVideoElem.pause();
68      kvVideoController.classList.add('js-stopped');
69      kvVideoControllerInnerText.innerText = '動画を再生';
70    }
71  });
72  //再生停止ボタンにフォーカスされた時
73  kvVideoController.addEventListener('focus', ()=>{
74    kvVideoControllerArea.classList.add('js-btnVisible');
75  });
76  kvVideoController.addEventListener('blur', ()=>{
77    kvVideoControllerArea.classList.remove('js-btnVisible');
78  });
79
80});