https://www.adcom-media.co.jp/wp-content/themes/adcom/assets/js/common.js

1//**************************************************************
2// 1. scroll fadein animation
3//**************************************************************
4$(window).scroll(function () {
5  $(".fadeInUp,.fadeInRight,.fadeInLeft,.fadeIn").each(function () {
6    var elemPos = $(this).offset().top,
7      scroll = $(window).scrollTop(),
8      windowHeight = $(window).height();
9
10    if (scroll > elemPos - windowHeight + 100) {
11      $(this).addClass("scrollin");
12    }
13  });
14});
15
16//**************************************************************
17// 2. Scroll ※topを離れたらclass付与
18//**************************************************************
19function init() {
20  // スクロールして何ピクセルでクラスを付与させるか
21  var px_change = 300;
22
23  // スクロールのイベントハンドラを登録　ヘッダーにクラス名 smaller を付与
24  window.addEventListener("scroll", function (e) {
25    // 変化するポイントまでスクロールしたらクラスを追加
26    if ($(window).scrollTop() > px_change) {
27      $("header").addClass("smaller");
28
29      // 変化するポイント以前であればクラスを削除
30    } else if ($("header").hasClass("smaller")) {
31      $("header").removeClass("smaller");
32      $("#header-nav").removeAttr("checked").prop("checked", false).change(); // topでpull down用のcheckを外す
33    }
34  });
35}
36window.onload = init();
37
38//**************************************************************
39// 4. スクロールしたら メニューを隠す
40//**************************************************************
41var startPos = 0,
42  winScrollTop = 0;
43$(window).on("scroll", function () {
44  winScrollTop = $(this).scrollTop();
45  if (winScrollTop >= startPos) {
46    if (winScrollTop >= 200) {
47      $(".site-header").addClass("hide");
48    }
49  } else {
50    $(".site-header").removeClass("hide");
51  }
52  startPos = winScrollTop;
53});
54
55//**********************************************************************
56// 5. ハンバーガーメニューの起動
57//**********************************************************************
58$(function () {
59  $(".hamburger").click(function () {
60    $(this).toggleClass("active");
61
62    if ($(this).hasClass("active")) {
63      $(".menu-contents").addClass("active");
64    } else {
65      $(".menu-contents").removeClass("active");
66    }
67  });
68});
69
70//**********************************************************************
71// 6. ハンバーガーメニューのメニュークリック後に 閉じる
72//**********************************************************************
73$(function () {
74  $(".modal-close").on("click", function (event) {
75    $(".menu-contents").removeClass("active");
76  });
77});
78
79$(function () {
80  $(".hum-close").on("click", function (event) {
81    $(".hamburger").removeClass("active");
82  });
83});
84
85//**********************************************************************
86// FADE IN ANIMATION（画面遷移）
87//**********************************************************************
88$(window).on("load", function () {
89  $("body").removeClass("fadeout");
90});
91
92$(function () {
93    // ハッシュリンク(#)と別ウィンドウでページを開く場合はスルー
94    $('a:not([href^="/#"]):not([target]):not([href^="mailto:"]):not([href^="tel:"])').on("click", function (e) {
95        e.preventDefault(); // ナビゲートをキャンセル
96        url = $(this).attr("href"); // 遷移先のURLを取得
97        if (url !== "") {
98            $("body").addClass("fadeout"); // bodyに class="fadeout"を挿入
99            setTimeout(function () {
100                window.location = url; // 0.8秒後に取得したURLに遷移
101            }, 800);
102        }
103        return false;
104    });
105});
106
107
108//**********************************************************************
109// FVスライド
110//**********************************************************************
111window.addEventListener( 'DOMContentLoaded', ( event ) => {
112 
113  const slides = document.getElementsByClassName('slides');
114  
115  for ( let i = 0; i < slides.length; ++i ) {
116    // 対象ラッパー要素
117    const target = slides[ i ];
118    // ループ1回分の時間
119    const duration = parseInt( target.dataset.duration ) * 1000 || 10000;
120    // スライダーの進行方向(右から左 or 左から右)
121    const isAlternate = target.classList.contains( 'alternate' );
122    // ロゴ数の取得
123    const childNum = target.firstElementChild.children.length;
124    // ロゴの幅の算出
125    const logoWidth = ( (100 / childNum ) * 100 / 100 ).toFixed( 2 );
126    // ロゴの幅をセット
127    target.style.setProperty( '--logo-width', `${ logoWidth }%` );
128 
129    // 開始時間
130    let startTime = 0;
131    // 経過時間

132    let elapsed = 0;
133    // 進捗(0-1)
134    let progress = 0;
135 
136    const loop  = ( currentTime ) => {
137      if ( !startTime ) {
138        startTime = currentTime;
139      }
140      // 現在の経過時間
141      elapsed = currentTime - startTime;
142      // 現在の進捗
143      progress = Math.min( 1, elapsed / duration );
144 
145      // 進捗が 100%(位置が 50%)になったらリセットして再ループ
146      if ( progress >= 1 ) {
147        startTime = 0;
148        elapsed = 0;
149        progress = 0;
150      }
151 
152      target.style.willChange = 'transform';
153      // スライドの位置を更新
154      if ( isAlternate ) {
155        // 左から右の場合
156        target.style.transform = `translate3d(${ -100 + progress * 100 }vw, 0, 0)`;
157      } else {
158        // 右から左の場合
159        target.style.transform = `translate3d(-${ progress * 100 }vw, 0, 0)`;
160      }
161 
162      // 次のフレームをリクエストする
163      window.requestAnimationFrame( loop );
164    }
165 
166    // ループを開始
167    window.requestAnimationFrame( loop );
168  };
169} );