https://fip-ent.com/wp/wp-content/themes/ppr-original-child/js/script.js

1jQuery(function($){
2
3  /* ----------------------------------------------------------------------
4  TOPページ最初のアニメーション（初回アクセス時のみ）
5  ---------------------------------------------------------------------- */
6  var webStorage = function(){
7    if(sessionStorage.getItem('access')){
8      $('#onload-page').css('display', 'none');
9      console.log('2回目以降のアクセスです');
10    } else {
11      $('#top-sec0-catch > .animation-container').css('display', 'none');
12      $('#onload-page').css('opacity', '1');
13      setTimeout(function(){
14        $('#onload-page').addClass('show-main');
15      }, 2000);
16      setTimeout(function(){
17        $('#top-sec0-catch > .animation-container').css('display', 'block');
18      }, 2300);
19      console.log('初回アクセスです');
20      sessionStorage.setItem('access', 0);
21    }
22  }  
23  webStorage();
24
25
26  /* ----------------------------------------------------------------------
27  機種別ハック用（class名を追加する）
28  ---------------------------------------------------------------------- */
29  $(function() {
30    if (navigator.userAgent.indexOf('iPhone') > 0) {
31        let body = document.getElementsByTagName('body')[0];
32        body.classList.add('iPhone');
33    } 
34    /*if (navigator.userAgent.indexOf('iPad') > 0) {
35        let body = document.getElementsByTagName('body')[0];
36        body.classList.add('iPad');
37    }*/
38    if (navigator.userAgent.indexOf('Android') > 0) {
39        let body = document.getElementsByTagName('body')[0];
40        body.classList.add('Android');
41    }
42
43    //ipad判定（iPadOS13以降対応）
44    var ua = window.navigator.userAgent.toLowerCase();
45    if(ua.indexOf('ipad') > -1 || ua.indexOf('macintosh') > -1 && 'ontouchend' in document){
46      let body = document.getElementsByTagName('body')[0];
47      body.classList.add('iPad');
48    }
49  });
50
51
52  /* ----------------------------------------------------------------------
53  ドロワーメニュー
54  ---------------------------------------------------------------------- */
55  $(function() {
56    $('.drawer').drawer();
57  });
58
59
60  /* ----------------------------------------------------------------------
61  PC←→画像切り替え
62  ---------------------------------------------------------------------- */
63  $(function () {
64    var width = $(window).width();
65    if( width < 768 ){
66      $(".switch").each(function(){
67        $(this).attr("src", $(this).attr("src").replace("img-","mb-img-"));
68      })
69    }
70  });
71
72
73  /* ----------------------------------------------------------------------
74  ページトップへ戻るボタン
75  ---------------------------------------------------------------------- */
76  $(function(){
77      var showFlug = false;
78      var topBtn = $('#pageTop');  
79      topBtn.css('bottom', '-30%');
80      var showFlug = false;
81      $(window).scroll(function () {
82        if ($(this).scrollTop() > 100) {
83          if (showFlug == false) {
84            showFlug = true;
85            topBtn.stop().animate({'bottom' : '2%'}, 200); 
86          }
87        } else {
88          if (showFlug) {
89            showFlug = false;
90            topBtn.stop().animate({'bottom' : '-30%'}, 200); 
91          }
92        }
93      });
94  });
95
96
97  /* ----------------------------------------------------------------------
98  ページ内リンクのスクロールアニメーション
99  ---------------------------------------------------------------------- */
100  $(function(){
101    $('a[href^="#"]').click(function() {
102      var speed = 400;
103      var href= $(this).attr("href");
104      var target = $(href == "#" || href == "" ? 'html' : href);
105      var position = target.offset().top;
106      $('body,html').animate({scrollTop:position}, speed, 'swing');
107      return false;
108    });
109  });
110
111
112  /* ----------------------------------------------------------------------
113  Swiper.js 設定
114  ---------------------------------------------------------------------- 
115  $(function() {
116    var swiper = new Swiper('.swiper-container', {
117      spaceBetween: 30,
118      centeredSlides: true,
119      loop: true,
120      autoplay: {
121        delay: 3000,
122        disableOnInteraction: false,
123      },
124      pagination: {
125        el: '.swiper-pagination',
126        clickable: true,
127      },
128      navigation: {
129        nextEl: '.swiper-button-next',
130        prevEl: '.swiper-button-prev',
131      },
132    });
133  });*/
134
135
136  /* ----------------------------------------------------------------------
137  指定Class内要素にspan付与し均等割り付け
138  ---------------------------------------------------------------------- 
139  $(function(){
140    function alignTexteEqually(){
141      var items = $('.justify-name');
142      var itemsLen = items.length;
143      for (i = 0; i < itemsLen; i++){
144        var array = [];
145        var item = items.eq(i);
146        var itemStr = item.text();
147        var itemLen = itemStr.length;
148        
149        for (s = 0; s < itemLen; s++){
150          var chara = itemStr.slice(s,s+1);
151          array.push('<span>' + chara + '</span>');
152        }
153        
154        item.text('').append(array).wrapInner('<p></p>');
155      }
156    }
157    alignTexteEqually();
158  });*/
159  
160
161  /* ----------------------------------------------------------------------
162  TOPページのみスクロールでheader表示
163  ---------------------------------------------------------------------- */
164  let $showParts = $('.ScrollShow');
165
166  var width = $(window).width();
167  if( width < 768 ){
168    var ScrollHeight = 250;
169  } else if( width < 1025 ) {
170    var ScrollHeight = 500;
171  } else {
172    var ScrollHeight = 600;
173  }
174
175  $(window).on( 'scroll', function () {
176    //スクロール位置を取得
177    if ( $(this).scrollTop() < ScrollHeight ) {
178      jQuery($showParts).hide();
179      $showParts.removeClass('isActive');
180    } else {
181      jQuery($showParts).show();
182      $showParts.addClass('isActive');
183    }
184  });
185
186
187  /* ----------------------------------------------------------------------
188  アイキャッチの動き制御
189  ---------------------------------------------------------------------- */
190  $(document).ready(function() {
191    var element = document.getElementById("page-body");
192    if( element.classList.contains('home') == true ){
193      $(window).on('scroll', function (){
194        var elem = $('.visual-box-img');
195        elem.each(function () {
196          var elemOffset = $(this).offset().top;
197          var scrollPos = $(window).scrollTop();
198          var wh = $(window).height();
199          if(scrollPos > elemOffset - wh + (wh / 2) ){
200            $(this).find('.box-open-top').css('top', -94 + 'vw');
201            $(this).find('.box-open-under').css('top', -33 + 'vw');
202          }
203        });
204      });
205    } else {
206      setTimeout(function(){
207        $('.visual-box-img').on('inview', function(event, isInView){
208          if (isInView) {
209            $(this).find('.box-open-top').css('top', -94 + 'vw');
210            $(this).find('.box-open-under').css('top', -33 + 'vw');
211          }
212        });
213      },1000);
214    }
215  });
216
217/*
218  $(document).ready(function() {
219
220  });*/
221
222
223  /* ----------------------------------------------------------------------
224  カウントアップ
225  ---------------------------------------------------------------------- */
226  /* Liverページ復活したらコメント取る*/
227  /*   $(document).ready(function() {
228    $('.countup').on('inview', function(event, isInView){
229      if (isInView) {
230          $('.countup').numerator({
231            easing: 'swing',
232            duration: 99999999,
233            toValue: 99999999,
234            delimiter: ',',
235            rounding: 0,
236            duration: 12000,
237          });
238      };
239    });
240  }); */
241  
242
243  /*---------------------------------------------------
244  ハートが上に動くアニメーションの複製 / 元は component/heart.scss
245  ---------------------------------------------------*/
246  /* Liverページ復活したらコメント取る*/
247/*   var hearts = 20;//ハートの個数
248
249  for (var i = 0; i <= hearts; i++) {

250    var moveVal = Math.ceil(Math.random() * 30);
251    var posVal = Math.ceil(Math.random() * 50);
252    var scaleVal = Math.ceil(Math.random() * 20);
253    var shakeVal = Math.ceil(Math.random() * 50);
254    $(".heart-sec").append('<div class="heart-move-up' + moveVal + ' pos' + posVal + '"><div class="scale' + scaleVal + '"><div class="item heart-shake' + shakeVal + '"><img src="https://reaf-mig.com/test_fip/wp/wp-content/themes/ppr-original-child/images/liver/img-liv-ico-heart-min.png" alt="" /></div></div>');
255  } */
256
257
258  /* ----------------------------------------------------------------------
259  Inview で animate.css 制御
260  ---------------------------------------------------------------------- */
261  $(document).ready(function() {
262    $('.animate1').on('inview', function(event, isInView){
263      if (isInView) {
264          $(this).addClass('animate__animated animate__slideInLeft animate-op1');
265          $(this).removeClass('animate-op0');
266      }
267    });
268    $('.animate2').on('inview', function(event, isInView){
269      if (isInView) {
270          $(this).addClass('animate__animated animate__slideInRight animate-op1');
271          $(this).removeClass('animate-op0');
272      }
273    });
274    $('.animate3').on('inview', function(event, isInView){
275      if (isInView) {
276          $(this).addClass('animate__animated animate__slideInDown animate-op1');
277          $(this).removeClass('animate-op0');
278      }
279    });
280    $('.animate4').on('inview', function(event, isInView){
281      if (isInView) {
282          $(this).addClass('animate__animated animate__slideInUp animate-op1');
283          $(this).removeClass('animate-op0');
284      }
285    });
286    $('.animate5').on('inview', function(event, isInView){
287      if (isInView) {
288          $(this).addClass('animate__animated animate__bounceIn animate-op1');
289          $(this).removeClass('animate-op0');
290      }
291    });
292
293    $('.line-anime1').on('inview', function(event, isInView){
294      if (isInView) {
295        $(this).children('span').css({'width':'50%'});
296      }
297    });
298      $('.line-anime2').on('inview', function(event, isInView){
299        var parts = $(this);
300        if (isInView) {
301          setTimeout(function(){
302            parts.children('span').css({'width':'50%'});
303          }, 800);
304        }
305      });
306  });
307
308  /* ----------------------------------------------------------------------
309  ページ遷移アニメーション
310  ---------------------------------------------------------------------- */  
311  // 画面が読み込まれた時、is-slideを外し、アニメーションさせる
312  /*
313  $(window).on('load', function(){
314    $('body').removeClass('is-slide');
315  });
316  
317  $(function() {
318    // ハッシュリンク(#)と別ウィンドウでページを開く場合は実行しない
319  
320    $('a:not([href^="#"]):not([target])').on('click', function(e){
321      e.preventDefault();         // ページ遷移を一旦キャンセル
322      url = $(this).attr('href'); // 遷移先のURLを取得
323  
324      if (url !== '') {
325        $('body').addClass('is-slide-in'); // 画面遷移前のアニメーション is-slide-in
326  
327        setTimeout(function () {
328          window.location = url;  // 0.7秒後に取得したURLに遷移
329        }, 100);
330      }
331      return false;
332    });
333  
334  });
335  */
336
337});