https://www.awkmiu.com/assets/js/awkmiu.common.js

1'use strict';
2const Setting = {
3  CONFIG: {
4    winW: 0,
5    winH: 0,
6    body: $('body'),
7    breakpoint: 900,
8    PCflag: false,
9    SPflag: false,
10  },
11  updateDOM() {
12    this.CONFIG.body = $('body');
13    this.CONFIG.winW = $(window).width();
14    this.CONFIG.winH = $(window).height();
15  },
16  AdjustHeight() {
17    let target = $('.js-height');
18    target.css({height: this.CONFIG.winH});
19  },
20  mql() {
21    if (this.CONFIG.winW > this.CONFIG.breakpoint) {
22      this.CONFIG.PCflag = true;
23      this.CONFIG.SPflag = false;
24    } else {
25      this.CONFIG.PCflag = false;
26      this.CONFIG.SPflag = true;
27    }
28  },
29  update() {
30    this.updateDOM();
31    this.AdjustHeight();
32    this.mql();
33  },
34  init() {
35    this.updateDOM();
36    this.AdjustHeight();
37    this.mql();
38  },
39};
40
41const Menu = {
42  glonav() {
43    $('.js-menu-btn').on('click', function (event) {
44      $('body').toggleClass('is-menu-open');
45    });
46  },
47  pagetop() {
48    $('.js-pagetop').on('click', function (event) {
49      $('body,html').animate(
50        {
51          scrollTop: 0,
52        },
53        1000,
54        'easeOutQuart'
55      );
56    });
57  },
58  smoothScroll(gap, duration, easing) {
59    let barHeight = $('.l-header__bar').innerHeight();
60    let urlHash = location.hash;
61    if (urlHash) {
62      setTimeout(function () {
63        let $target = $(urlHash);
64        if ($target.length) {
65          let position = $target.offset().top - barHeight;
66          $('body,html').stop().animate({scrollTop: position}, duration, easing);
67        }
68      }, 50);
69    }
70    $('a[href*="#"]').on('click', function () {
71      let $target = $(this.hash);
72      if ($target.length) {
73        let position = $target.offset().top - barHeight;
74        $('body,html').animate({scrollTop: position}, duration, easing);
75      }
76    });
77  },
78  pagelink(gap, duration, easing) {
79    $('.js-link-btn').on('click', function (event) {
80      event.preventDefault();
81      var linkUrl = $(this).attr('href');
82      $('.l-page').addClass('is-in');
83      setTimeout(function () {
84        location.href = linkUrl;
85        let $target = $(this.hash);
86        if ($target.length) {
87          let position = $target.offset().top - barHeight;
88          $('body,html').animate({scrollTop: position}, duration, easing);
89        }
90      }, 750);
91    });
92  },
93  init() {
94    this.glonav();
95    this.pagetop();
96    this.pagelink();
97    // this.smoothScroll();
98  },
99};
100
101const ScrollAnimation = {
102  module: null,
103  param: {
104    elem: '[data-scroll]',
105    displayRatio: 0.8,
106    // displayReverse: true,
107    addClassNameActive: 'is-active',
108    on: {
109      Scroll(top) {
110        if ($('.l-bg').length) {
111          if (top > Setting.CONFIG.winH / 2) {
112            $('.l-bg').addClass('is-scrolled');
113          } else {
114            $('.l-bg').removeClass('is-scrolled');
115          }
116        }
117        let ft = $('.l-footer').offset().top;
118        if (top > ft - Setting.CONFIG.winH) {
119          if ($('.l-bg').length) {
120            $('.l-bg').addClass('is-hide');
121          } else if ($('.l-in__logo').length) {
122            $('.l-in__logo').addClass('is-hide');
123          }
124        } else {
125          if ($('.l-bg').length) {
126            $('.l-bg').removeClass('is-hide');
127          } else if ($('.l-in__logo').length) {
128            $('.l-in__logo').removeClass('is-hide');
129          }
130        }
131      },
132    },
133  },
134  set() {
135    this.module = new SCROLL_EFFECT_MODULE(this.param);
136  },
137  resize() {
138    window.addEventListener('resize', () => {
139      this.update();
140    });
141  },
142  update() {
143    if (this.module) {
144      this.module.Update();
145    }
146  },
147  refresh() {
148    if (this.module) {
149      this.module.Refresh();
150    }
151  },
152  init() {
153    this.set();
154    this.resize();
155  },
156};
157
158const Menu_fixed = () => {
159  let array = ['.p-top-wrap', '.l-in__content'];
160
161  array.forEach((element) => {
162    // 要素の寸法と、そのビューポートに対する相対位置
163    let dataItem = document.querySelector(element);
164    let daaata = dataItem;
165    if (daaata != null) {
166      const target = document.querySelector(element).getBoundingClientRect();
167
168      if (target.top < 0) {
169        $('.l-header').addClass('is-fixed');
170      } else {
171        $('.l-header').removeClass('is-fixed');
172      }
173    }
174  });
175};
176
177const setCssProperty = () => {
178  const viewHeight = window.innerHeight;
179  const footerHeight = document.querySelector('.l-footer').clientHeight;
180
181  const root = document.querySelector(':root');
182  root.style.setProperty('--vh', ''.concat(viewHeight, 'px'));
183  root.style.setProperty('--footer-height', ''.concat(footerHeight, 'px'));
184};
185
186$(function () {

187  Setting.init();
188  Setting.CONFIG.body.addClass('is-ready');
189});
190
191$(window).on('load', function () {
192  Setting.CONFIG.body.addClass('is-load');
193  Menu.init();
194  setTimeout(function () {
195    ScrollAnimation.init();
196  }, 500);
197});
198
199window.addEventListener('resize', () => {
200  Setting.update();
201});
202
203$(window).on('scroll', function () {
204  Menu_fixed();
205});
206
207$(window).on('load resize', function () {
208  setCssProperty();
209});