https://www.netsukekan.jp/en/wp-content/themes/en_netsuke/js/common.js

1// JavaScript Document	/
2
3
4//-----------------------------------------------------------------------------
5//    ドロワー
6//----------------------------------------------------------------------------
7$('.header__btn').on('click', function () {
8  $(this).toggleClass("open");
9  $('nav').toggleClass("open");
10  $('body').toggleClass("open");
11  return false;
12});
13$(document).on('click', 'nav.open a', function () {
14  $('.header__btn').trigger('click');
15})
16
17$(document).on('click',function(e) { // 画面クリック
18  if(!$(e.target).closest('header').length) { // ヘッダー以外か条件判定
19    // クラス削除
20    $(".header__btn").removeClass("open");
21    $("nav").removeClass("open");
22    $("body").removeClass("open");
23  }
24});
25
26
27//-----------------------------------------------------------------------------
28//    フェードインアニメーション
29//----------------------------------------------------------------------------
30function showElementAnimation() {
31
32  var element = document.getElementsByClassName('item');
33  if (!element) return; // 要素がなかったら処理をキャンセル
34
35  var showTiming = window.innerHeight > 768 ? 200 : 40; // 要素が出てくるタイミングはここで調整
36  var scrollY = window.pageYOffset;
37  var windowH = window.innerHeight;
38
39  for (var i = 0; i < element.length; i++) {
40    var elemClientRect = element[i].getBoundingClientRect(); var elemY = scrollY + elemClientRect.top; if (scrollY + windowH - showTiming > elemY) {
41      element[i].classList.add('is-show');
42    } else if (scrollY + windowH < elemY) {
43      // 上にスクロールして再度非表示にする場合はこちらを記述
44      element[i].classList.remove('is-show');
45    }
46  }
47}
48showElementAnimation();
49window.addEventListener('scroll', showElementAnimation);
50
51
52
53
54//-----------------------------------------------------------------------------
55//    ページの上部へ戻るボタン
56//----------------------------------------------------------------------------
57function PageTopAnime() {
58  var scroll = $(window).scrollTop();
59  if (scroll >= 2000) {//上から2000pxスクロールしたら
60    $('.page-top').removeClass('DownMove');//#page-topについているDownMoveというクラス名を除く
61    $('.page-top').addClass('UpMove');//#page-topについているUpMoveというクラス名を付与
62  } else {
63    if ($('.page-top').hasClass('UpMove')) {//すでに#page-topにUpMoveというクラス名がついていたら
64      $('.page-top').removeClass('UpMove');

64//UpMoveというクラス名を除き
65      $('.page-top').addClass('DownMove');//DownMoveというクラス名を#page-topに付与
66    }
67  }
68}
69
70// 画面をスクロールをしたら動かしたい場合の記述
71$(window).scroll(function () {
72  PageTopAnime();/* スクロールした際の動きの関数を呼ぶ*/
73});
74
75// #page-topをクリックした際の設定
76$('.page-top').click(function () {
77  $('body,html').animate({
78    scrollTop: 0//ページトップまでスクロール
79  }, 1500);//ページトップスクロールの速さ。数字が大きいほど遅くなる
80  return false;//リンク自体の無効化
81});
82
83
84//-----------------------------------------------------------------------------
85//    トップページモーダル
86//----------------------------------------------------------------------------
87
88var scrollPos;
89//  $( this ).on( 'click', function() {
90$(document).on('click', '.js-modal-open', function () {
91  scrollPos = $(window).scrollTop();
92  let target = $(this).data('target');
93  let modal = document.getElementById(target);
94  $(modal).fadeIn(300);
95  $('.wrapper').addClass('modal_open');
96  if($('.hero__video video').length)$('.hero__video video').get(0).pause();
97  return false;
98});
99
100// ウィンドウを閉じる
101$(document).on('click', '.js-modal-close', function () {
102  $('.js-modal').fadeOut(300);
103  $('.wrapper').removeClass('modal_open');
104  if($('.hero__video video').length)$('.hero__video video').get(0).play();
105  //動画を止める(originに元ページのURLが入っていないと動かない)
106  if($('#player').length){
107    var playerWindow = $('#player')[0].contentWindow;
108    playerWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*');
109  }
110  $(window).scrollTop(scrollPos);
111  return false;
112});
113
114//-----------------------------------------------------------------------------
115//    スライダー
116//----------------------------------------------------------------------------
117
118$(function () {
119  $(".thumbs a").click(function () {
120    let largePath = $(this).attr("href");
121    $(".largeImage").attr({
122      src: largePath
123    });
124    return false;
125  });
126});
127
128
129//-----------------------------------------------------------------------------
130//    タブセット
131//----------------------------------------------------------------------------
132//function GethashID (hashIDName){
133//  if(hashIDName){
134//    //タブ設定
135//    $('.tab__category li').find('a').each(function() { //タブ内のaタグ全てを取得
136//      var idName = $(this).attr('href'); //タブ内のaタグのリンク名（例）#lunchの値を取得
137//      if(idName == hashIDName){ //リンク元の指定されたURLのハッシュタグ（例）http://example.com/#lunch←この#の値とタブ内のリンク名（例）#lunchが同じかをチェック
138//        var parentElm = $(this).parent(); //タブ内のaタグの親要素（li）を取得
139//        $('.tab__category li').removeClass("active"); //タブ内のliについているactiveクラスを取り除き
140//        $(parentElm).addClass("active"); //リンク元の指定されたURLのハッシュタグとタブ内のリンク名が同じであれば、liにactiveクラスを追加
141//        //表示させるエリア設定
142//        $(".tab__contents").removeClass("is-active"); //もともとついているis-activeクラスを取り除き
143//        $(hashIDName).addClass("is-active"); //表示させたいエリアのタブリンク名をクリックしたら、表示エリアにis-activeクラスを追加
144//      }
145//    });
146//  }
147//}
148//
149////タブをクリックしたら
150//$('.tab__category a').on('click', function() {
151//  var idName = $(this).attr('href'); //タブ内のリンク名を取得
152//  GethashID (idName);//設定したタブの読み込みと
153//  return false;//aタグを無効にする
154//});
155//
156//
157//// 上記の動きをページが読み込まれたらすぐに動かす
158//$(window).on('load', function () {
159//    $('.tab__category li:first-of-type').addClass("active"); //最初のliにactiveクラスを追加
160//    $('.tab__contents:first-of-type').addClass("is-active"); //最初の.areaにis-activeクラスを追加
161//  var hashName = location.hash; //リンク元の指定されたURLのハッシュタグを取得
162//  GethashID (hashName);//設定したタブの読み込み
163//});
164//
165
166
167//-----------------------------------------------------------------------------
168//    スライダー
169//----------------------------------------------------------------------------
170$(function () {
171  $('.slider').slick({

172    arrows: false,
173    dots: true,
174    fade: true,
175    autoplay: true,
176    autoplaySpeed: 3000,
177    speed: 1000,
178    slidesToShow: 1,
179  });
180});
181
182
183//-----------------------------------------------------------------------------
184//    ロゴ画像切り替え
185//----------------------------------------------------------------------------
186
187$(window).on('load resize', function() {
188    $(window).on('scroll', function() {
189    	if(location.pathname != '/'){
190	        let scrollY = $(this).scrollTop();
191            let logo_s = $('.header__logo').offset().top;
192            let footer_t = $('footer').offset().top;
193            let footer_h = $('footer').outerHeight()+footer_t;
194	        if (scrollY > 0) {
195	            $('.header__logo').addClass('mini');
196                $('.switch__language').addClass('mini');
197	            $('.header__btn').addClass('mini');
198
199	        } else {
200	            $('.header__logo').removeClass('mini');
201                $('.switch__language').removeClass('mini');
202	            $('.header__btn').removeClass('mini');
203	        }
204            if (footer_t < logo_s && footer_h > logo_s) {
205                $('.header .header__logo img').attr('src', '/wp-content/themes/en_netsuke/img/common/LOGO.svg')
206                if(!$('.header__logo').hasClass('mini'))$('.header__logo').addClass('mini');
207                if(!$('.switch__language').hasClass('mini'))$('.switch__language').addClass('mini');
208                if(!$('.header__btn').hasClass('mini'))$('.header__btn').addClass('mini');
209            } else {
210            	$('.header .header__logo img').attr('src', '/wp-content/themes/en_netsuke/img/common/LOGO_bk.svg')
211            }
212        }
213    });
214});
215/*曜日の訳サンプル
216$(window).on('load', function() {
217	cal_en();
218});
219$(document).on('click', '.calbtn', function () {
220	cal_en();
221});
222function cal_en(){
223  var arr = {
224    '<th>日</th>' : '<th>S</th>',
225    '<th>月</th>' : '<th>M</th>',
226    '<th>火</th>' : '<th>T</th>',
227    '<th>æ°´</th>' : '<th>W</th>',
228    '<th>木</th>' : '<th>T</th>',
229    '<th>金</th>' : '<th>F</th>',
230    '<th>土</th>' : '<th>S</th>'
231  };
232  var elm = $('table.bizcal');
233  elm.each(function(i){
234    $.each(arr,function(key,value){
235      var txt = elm.eq(i).html();
236      elm.eq(i).html(txt.replace(key,value));
237    });
238  });
239}
240*/