https://chuden-plant.co.jp/assets-top/js/script.js

1let vh = window.innerHeight * 0.01;
2document.documentElement.style.setProperty('--vh', `${vh}px`);
3
4window.addEventListener('resize', () => {
5  let vh = window.innerHeight * 0.01;
6  document.documentElement.style.setProperty('--vh', `${vh}px`);
7});
8
9$(function(){
10  $("html, body").stop().scrollTop(0);
11
12  setTimeout(function(){
13    bodyScrollPrevent(false);
14  }, 1);
15
16  var headH = 0;
17  var animeSpeed = 1000;
18
19
20  var topBtn = $('#btn-pagetop');
21  topBtn.click(function() {
22    $( 'html,body' ).animate( { scrollTop: 0 }, 600 );
23    $( 'html,body', parent.document ).animate( { scrollTop: 0 }, 600 );
24    return false;
25  });
26
27  // ページ内アンカー
28  $('.js-anker a[href^="#"]').on('click', function(){
29    var adjust = 0;
30    var speed = 600;
31    var href= $(this).attr("href");
32    var target = $(href == "#" || href == "" ? 'html' : href);
33    var position = target.offset().top + adjust;
34    $('body,html').animate({scrollTop:position}, speed, 'swing');
35
36    setTimeout(function(){
37      bodyScrollPrevent(false);
38    }, 1);
39
40    return false;
41  });
42
43  $('.humberger').on('click', function(){
44    if($(this).hasClass('is-close')){
45      $(this).removeClass('is-close');
46      $('#modal-entry').removeClass('is-active');
47      $('.l-header').css({'position': 'fixed'});
48      $('.header-logo').css({
49        'opacity': 1
50      });
51      setTimeout(function(){
52        bodyScrollPrevent(false);
53      }, 10);
54    } else if($(this).hasClass('is-active')){
55      $(this).removeClass('is-active');
56      $('#modal-menu').removeClass('is-active');
57      setTimeout(function(){
58        bodyScrollPrevent(false);
59      }, 10);
60    } else {
61      $(this).addClass('is-active');
62      $('#modal-menu').addClass('is-active');
63      setTimeout(function(){
64        bodyScrollPrevent(true);
65      }, 1);
66    }
67    return false;
68  });
69
70  $('.nav-list__link').on('click', function(){
71    $('.humberger').removeClass('is-active');
72    $('#modal-menu').removeClass('is-active');
73
74    var speed = 600;
75    var href= $(this).attr("href");
76    var target = $(href == "#" || href == "" ? 'html' : href);
77
78    setTimeout(function(){
79      bodyScrollPrevent(false);
80    }, 1);
81    setTimeout(function(){
82      var position = target.offset().top;
83      $('body,html').animate({scrollTop:position}, speed, 'swing');
84    }, 401);
85
86    return false;
87  });
88
89  // 音楽再生
90  var audio = $("#audio").get(0);
91  var isPlaying = false;
92  $("#player").on("click", function () {
93    if (isPlaying) {
94      audio.pause();
95      $('.playing').hide();
96      $('.stoped').show();
97    } else {
98      audio.play();
99      $('.playing').show();
100      $('.stoped').hide();
101    }
102  });
103  audio.onplaying = function() {
104    isPlaying = true;
105  };
106  audio.onpause = function() {
107    isPlaying = false;
108  };
109
110  var ww = $(window).innerWidth();
111  var wh = $(window).innerHeight();
112  var x = 769;
113
114  if(ww < x) {
115  } else {
116
117    $('.nav-list__item.-item01').find('.nav-list__link').on('click', function(){
118      setTimeout(function(){
119        $('.hover-content').removeClass('is-open');
120        $('.hover-content.-content01').addClass('is-open');
121      }, 100);
122    });
123    $('.nav-list__item.-item02').find('.nav-list__link').on('click', function(){
124      setTimeout(function(){
125        $('.hover-content').removeClass('is-open');
126        $('.hover-content.-content02').addClass('is-open');
127      }, 100);
128    });
129    $('.nav-list__item.-item03').find('.nav-list__link').on('click', function(){
130      setTimeout(function(){
131        $('.hover-content').removeClass('is-open');
132        $('.hover-content.-content03').addClass('is-open');
133      }, 100);
134    });
135
136    if($('.hover-wrap').hasClass('open-service')) {
137      $('.hover-content.-content02, .hover-content.-content03').removeClass('is-open');
138    } else if($('.hover-wrap').hasClass('open-sustainability')) {
139      $('.hover-content.-content01, .hover-content.-content03').removeClass('is-open');
140    } else if($('.hover-wrap').hasClass('open-recruit')) {
141      $('.hover-content.-content01, .hover-content.-content02').removeClass('is-open');
142    }
143
144    const box = $('.hover-content');
145    box.mouseover(function () {
146      box.removeClass('is-open');
147      $(this).addClass('is-open');
148    });
149
150    box.mouseout(function () {
151      $(this).removeClass('is-open');
152    });
153  }
154
155  // modal
156  $('.js-modal_trigger').each(function(){
157    $(this).on('click',function(){
158      var target = $(this).data('target');
159      var modal = document.getElementById(target);
160      $(modal).fadeIn('fast').addClass('is-active');
161      $('.humberger').addClass('is-close').removeClass('is-active');
162      $('.header-logo').css({
163        'opacity': 0
164      });
165      setTimeout(function(){

166        bodyScrollPrevent(true);
167      }, 1);
168      return false;
169    });
170  });
171
172});
173
174$(window).on('load', function(){
175  setTimeout(function(){
176    $('.hero-text').fadeIn('slow');
177  }, 10);
178});
179
180$(window).on('load resize', function(){
181  var ww = $(window).innerWidth();
182  var wh = $(window).innerHeight();
183  var x = 769;
184  var targetH = $('.modal_body-inner').height();
185
186  if(ww < x) {
187    if(wh < 500) {
188      $('#modal-menu').removeClass('h-100vh').css({
189        'overflow-y': 'auto'
190      });
191      $('.menu-body').css({'height': 'auto'});
192    } else if(715 < wh) {
193      $('.menu-body').css({'height': '100%'});
194    }
195  } else {
196
197  }
198});
199
200$(window).on('load scroll', function(){
201}).trigger('scroll');
202
203
204// ==============================
205// functions
206// ------------------------------
207function bodyScrollPrevent(flag) {
208  let scrollPosition;
209  const body = document.getElementsByTagName('body')[0];
210  const ua = window.navigator.userAgent.toLowerCase();
211  const isiOS = ua.indexOf('iphone') > -1 || ua.indexOf('ipad') > -1 || ua.indexOf('macintosh') > -1 && 'ontouchend' in document;
212  const scrollBarWidth = window.innerWidth - document.body.clientWidth;
213  if (flag) {
214    if (isiOS) {
215      scrollPosition = -window.pageYOffset;
216      body.style.position = 'fixed';
217      body.style.width = '100%';
218      body.style.top = scrollPosition + 'px';
219    } else {
220      body.style.overflow = 'hidden';
221    }
222  } else if (!flag) {
223    if (isiOS) {
224      scrollPosition = parseInt(body.style.top.replace(/[^0-9]/g, ''));
225      body.style.position = '';
226      body.style.width = '';
227      body.style.top = '';
228      window.scrollTo(0, scrollPosition);
229    } else {
230      body.style.overflow = '';
231    }
232  }
233}
234
235
236var ua = navigator.userAgent.toLowerCase();
237var isMobile = /iphone/.test(ua)||/android(.+)?mobile/.test(ua);
238
239if (!isMobile) {
240  $('a[href^="tel:"]').addClass('not_mobile');
241  $('a[href^="tel:"]').on('click', function(e) {
242    e.preventDefault();
243  });
244
245
246  // ==============================
247  // cursor
248  // ------------------------------
249  let cursorR = 4;  //カーソルの半径
250  const cursor = document.getElementById('cursor');  //カーソル用のdivを取得
251  const stalker = document.getElementById('stalker'); //ストーカー用のdivを取得
252
253  //マウスに追従させる処理
254  document.addEventListener('mousemove', function (e) {
255    stalker.style.transform = 'translate(' + e.clientX + 'px, ' + e.clientY + 'px)';
256    cursor.style.transform = 'translate(' + e.clientX + 'px, ' + e.clientY + 'px)';
257  });
258
259  //aタグにホバー中かどうかの判別フラグ
260  let hovFlag = false;
261
262  //aタグにホバーしたときに、ストーカーにクラスを追加
263  const linkElem = document.querySelectorAll('a');
264  for (let i = 0; i < linkElem.length; i++) {
265    //マウスホバー時
266    linkElem[i].addEventListener('mouseover', function (e) {
267      hovFlag = true;
268      //ストーカーにクラスを追加
269      stalker.classList.add('hov_');
270    });
271    //マウスホバー解除時
272    linkElem[i].addEventListener('mouseout', function (e) {
273      hovFlag = false;
274      stalker.classList.remove('hov_');
275    });
276  }
277
278  const linkElem01 = document.querySelectorAll('.mousecursor');
279  for (let i = 0; i < linkElem01.length; i++) {
280    //マウスホバー時
281    linkElem01[i].addEventListener('mouseover', function (e) {
282      hovFlag = true;
283      //ストーカーにクラスを追加
284      stalker.classList.add('hov_');
285    });
286    //マウスホバー解除時
287    linkElem01[i].addEventListener('mouseout', function (e) {
288      hovFlag = false;
289      stalker.classList.remove('hov_');
290    });
291  }
292}