https://hadairoha.com/wp-content/themes/hadairoha_231206/js/common.js

1/*------------------------------------------------------------
2    デバイスの判別
3------------------------------------------------------------*/
4var _ua = (function (u) {
5  return {
6    Tablet: (u.indexOf("windows") != -1 && u.indexOf("touch") != -1 && u.indexOf("tablet pc") == -1) || u.indexOf("ipad") != -1 || (u.indexOf("android") != -1 && u.indexOf("mobile") == -1) || (u.indexOf("firefox") != -1 && u.indexOf("tablet") != -1) || u.indexOf("kindle") != -1 || u.indexOf("silk") != -1 || u.indexOf("playbook") != -1,
7    Mobile: (u.indexOf("windows") != -1 && u.indexOf("phone") != -1) || u.indexOf("iphone") != -1 || u.indexOf("ipod") != -1 || (u.indexOf("android") != -1 && u.indexOf("mobile") != -1) || (u.indexOf("firefox") != -1 && u.indexOf("mobile") != -1) || u.indexOf("blackberry") != -1
8  }
9})(window.navigator.userAgent.toLowerCase());
10//console.log(_ua);
11
12
13/*------------------------------------------------------------
14    変数の設定
15------------------------------------------------------------*/
16//ブレークポイント
17var breakPoint = 768;
18
19
20/*------------------------------------------------------------
21    ファーストビュー用
22------------------------------------------------------------*/
23// 最初に、ビューポートの高さを取得し、0.01を掛けて1%の値を算出して、vh単位の値を取得
24let vh = window.innerHeight * 0.01;
25
26// カスタム変数--vhの値をドキュメントのルートに設定
27document.documentElement.style.setProperty('--vh', `${vh}px`);
28
29
30/*------------------------------------------------------------
31    ofi.js
32------------------------------------------------------------*/
33objectFitImages('img.ofi');
34
35
36/*------------------------------------------------------------
37    smooth-scroll.js
38------------------------------------------------------------*/
39var scroll = new SmoothScroll('a[href*="#"]', {
40  header: '[data-scroll-header]',
41  // easing: 'easeOutCubic',
42  speed: 500,
43  speedAsDuration: true,
44  updateURL: false,
45});
46
47
48$(function () {
49  /*------------------------------------------------------------
50      モード設定
51  ------------------------------------------------------------*/
52  if (_ua.Mobile) {
53    $('html').addClass('mode_sp');
54  } else if (_ua.Tablet) {
55    $('html').addClass('mode_tb');
56  } else {
57    $('html').addClass('mode_pc');
58  }
59
60
61  /*------------------------------------------------------------
62      infiniteslide.js
63  ------------------------------------------------------------*/
64  $(document).ready(function () {
65    $('.infiniteslide').infiniteslide({
66      pauseonhover: false,
67      clone: 3,
68      speed: 25,
69      direction: 'left',
70    });
71  });
72
73
74  /*------------------------------------------------------------
75      タブメニュー
76  ------------------------------------------------------------*/
77  var block1 = $(".c-tabset .content-block .block"),
78      tab_item1 = $(".c-tabset .tab-list li");
79
80  block1.css('visibility','visible').css('display','none');
81  block1.eq(0).fadeIn();
82  tab_item1.removeClass('select');
83  tab_item1.eq(0).addClass('select');
84
85  // タブメニュー
86  tab_item1.on('click', function() {
87      if($(this).hasClass('select')){
88          return false;
89      }
90      var num = tab_item1.index(this);
91      block1.css('display','none');
92      block1.eq(num).fadeIn();
93      tab_item1.removeClass('select');
94      $(this).addClass('select');
95  });
96
97
98  /*------------------------------------------------------------
99      アコーディオン
100  ------------------------------------------------------------*/
101  $('.p-faq__box .box__q').on('click', function() {
102      $(this).parent('.p-faq__box').toggleClass('is-open');
103      $(this).parent('.p-faq__box').children('.box__a').slideToggle();
104  });
105
106
107  /*------------------------------------------------------------
108      colorbox
109  ------------------------------------------------------------*/
110  try {
111      $(".js-colorbox").colorbox({
112          className: '-img',
113          speed: 500,
114          opacity: 0.3,
115          maxWidth:'90%',
116          maxHeight:'90%',
117          loop : false,
118      });
119  }catch(e){}
120
121
122  /*------------------------------------------------------------
123      retina画像切替
124  ------------------------------------------------------------*/
125  $(window).on('load', function () {
126    if (window.devicePixelRatio >= 2) { // Retinaディスプレイのときを分岐させている
127      $('img.retina').each(function () {
128        var retinaimg = $(this).attr('src').replace(/\.(?=(?:png|jpg|jpeg|gif)$)/i, '@2x.');
129        $(this).attr('srcset', retinaimg + " 2x");
130      });
131    }
132  });
133
134
135  /*------------------------------------------------------------
136      trunk8.js
137  ------------------------------------------------------------*/
138  // 1行
139  $('.text_line1').trunk8({
140    lines: 1,
141    fill: '...',
142  });
143  // 2行
144  $('.text_line2').trunk8({
145    lines: 2,
146  });
147
148
149  /*------------------------------------------------------------
150      ツリーメニュー
151  ------------------------------------------------------------*/
152  var tree_menu = $('#header .global_nav li.tree');
153  tree_menu.hover(
154    //over
155    function () {
156      $('.child:not(:animated)', this).addClass('active');
157    },
158    //out
159    function () {
160      $('.child', this).removeClass('active');
161    }
162  );
163
164
165  /*------------------------------------------------------------
166      スクロールチェンジ
167  ------------------------------------------------------------*/
168  $(document).ready(function () {
169    var body = $('body'),
170      fixed_right = $('.fixed_right');
171
172    $(window).scroll(function () {
173      var trigger = $('.contents').offset().top;
174
175      if ($(this).scrollTop() > trigger) {
176        // 下
177        fixed_right.addClass("active");
178      } else if ($(this).scrollTop() < trigger) {
179        // 上
180        fixed_right.removeClass("active");
181      };
182    });
183  });
184
185
186  /*------------------------------------------------------------
187      PC・スマホ画像切替
188  ------------------------------------------------------------*/
189  //ウィンドウサイズによって画像変更（ファイル名_pc、ファイル名_spで切り替え）
190  function imgswitch() {
191    if ($(window).width() > breakPoint) {
192      $('img').not('.no_change').each(function () {
193        $(this).attr("src", $(this).attr("src").replace(/^(.*)_sp\.(.*)$/, '$1_pc.$2'));
194      });
195    } else {
196      $('img').not('.no_change').each(function () {
197        $(this).attr("src", $(this).attr("src").replace(/^(.*)_pc\.(.*)$/, '$1_sp.$2'));
198      });
199    }
200  }
201  $(window).on("load resize", imgswitch);
202
203
204  /*------------------------------------------------------------
205      ページトップ
206  ------------------------------------------------------------*/
207  var topBtn = $('.pagetop');
208  topBtn.hide();
209  //スクロール値に達したらボタン表示
210  $(window).on('scroll', function () {
211    if ($(this).scrollTop() > 700) {
212      topBtn.fadeIn();
213    } else {
214      topBtn.fadeOut();
215    }
216  });
217
218
219  /*------------------------------------------------------------
220      WEB予約ボタンの開閉
221  ------------------------------------------------------------*/
222  $('.popup_open').on('click', function () {
223    $('.overlay__open').fadeIn();
224  });
225  $('.open__close').on('click', function () {
226    $('.overlay__open').fadeOut();
227  });
228
229  /*------------------------------------------------------------
230      電話番号にリンクを付ける
231  ------------------------------------------------------------*/
232  /* DOMの読み込み完了後に処理 */
233  if (window.addEventListener) {
234    window.addEventListener("load", TelephoneLink, false);
235  } else {
236    window.attachEvent("onload", TelephoneLink);
237  }
238
239  //電話番号にリンクを付ける関数
240  function TelephoneLink() {
241    // 画面幅を取得
242    //var width = window.innerWidth ;
243
244    // 画面幅が480px以上の場合は終了
245    //if( width>=480 ){ return false ; }
246
247    // モバイル以外の場合は終了
248    if (!_ua.Mobile) {
249      return false;

250    }
251
252    // [class="tel-link"]の要素を取得
253    var elms = document.getElementsByClassName("tel_link");
254
255    // リンクを付けていく
256    for (var i = 0, l = elms.length; l > i; i++) {
257      // 処理する要素
258      var elm = elms[i];
259
260      // 電話番号を取得
261      var number = elm.getAttribute("data-number");
262
263      // [href]属性値を設定する
264      if (number != null) {
265        if (elm.tagName == "A") {
266          // Aタグの場合
267          elm.href = "tel:" + number;
268        } else {
269          // それ以外のタグの場合
270          var text = elm.innerHTML;
271          elm.innerHTML = '<a href="tel:' + number + '">' + text + '</a>';
272        }
273      }
274    }
275  };
276    
277    
278jQuery(function(){
279  var windowWidth = $(window).width();
280  var headerHight = 150; 
281  jQuery('a[href^=#]:not(.not)').click(function() {
282    var speed = 1000;
283    var href= jQuery(this).attr("href");
284    var target = jQuery(href == "#" || href == "" ? 'html' : href);
285    var position = target.offset().top-headerHight;
286    jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
287    return false;
288  });
289});    
290
291    
292  /*------------------------------------------------------------
293      コピペ禁止
294  ------------------------------------------------------------*/
295$(function(){
296	$('input.copynone').on('copy cut paste',function(e){
297		e.preventDefault();
298	});
299});    
300});
301
302
303/*------------------------------------------------------------
304    スクロール
305------------------------------------------------------------*/
306$(window).on('scroll load assessFeatureHeaders', function () {
307    var scrollTop = $(window).scrollTop();
308    var appearenceBuffer = 60;
309    var windowBottom = scrollTop + $(window).height() - appearenceBuffer;
310    $('body').toggleClass('scrolled-down', scrollTop > 0);
311    $('.scrollin:not(.active)').filter(function () {
312        var offset = $(this).offset().top;
313        var height = $(this).outerHeight();
314        return offset + height >= scrollTop && offset <= windowBottom;
315    }).addClass('active');
316
317    $('.fadeup:not(.active)').filter(function () {
318        var offset = $(this).offset().top;
319        var height = $(this).outerHeight();
320        return offset + height >= scrollTop && offset <= windowBottom;
321    }).addClass('active');
322
323    $('.fadeUpTrigger').each(function(){
324        var elemPos = $(this).offset().top+50;
325        var scroll = $(window).scrollTop();
326        var windowHeight = $(window).height();
327        if (scroll >= elemPos - windowHeight){
328            $(this).addClass('fadeUp');
329        }
330    });
331});
332
333