https://silentwitch.net/assets2/js/silent_witch.teaser.js

1'use strict';
2$(document).on('load', function () {
3  On.ready();
4});
5$(window).on('load', function () {
6  On.load();
7});
8
9const On = {
10  ready() {
11    $('body').addClass('is-ready');
12  },
13  load() {
14    session.init();
15    $('body').addClass('is-load');
16    scrollEffectModule.init();
17    modal.init();
18    // op.init();
19    menu.init();
20  },
21};
22const session = {
23  set() {
24    if (sessionStorage.getItem('access') === 'true') {
25      $('body').addClass('is-accessed');
26    } else {
27      sessionStorage.setItem('access', 'true');
28    }
29  },
30  init() {
31    this.set();
32  },
33};
34const op = {
35  set() {
36    // オープニング時のスクロール制御
37    function ban_scroll() {
38      document.addEventListener('wheel', notscroll, {passive: false});
39      document.addEventListener('touchmove', notscroll, {passive: false});
40    }
41    function go_scroll() {
42      document.removeEventListener('wheel', notscroll, {passive: false});
43      document.removeEventListener('touchmove', notscroll, {passive: false});
44    }
45
46    function notscroll(e) {
47      e.preventDefault();
48    }
49
50    ban_scroll();
51
52    setTimeout(function () {
53      $(window).scrollTop($('.js-kv').height() - $(window).height());
54    }, 10);
55    setTimeout(function () {
56      $('body, html').animate(
57        {
58          scrollTop: 0,
59        },
60        3000
61      );
62    }, 4000);
63    setTimeout(function () {
64      go_scroll();
65    }, 3100);
66  },
67  init() {
68    if ($(window).width() >= 900) {
69      this.set();
70    }
71  },
72};
73
74const menu = {
75  scroll() {
76    // ページ内スクロール
77    $('.js-menu-scroll').on('click', function () {
78      $('body').removeClass('is-menu-open');
79      $('body,html').animate(
80        {
81          scrollTop: $(''.concat($(this).attr('data-menu-scroll'))).offset().top,
82        },
83        1000,
84        'easeInOutExpo'
85      );
86    });
87  },
88  active() {
89    // メニューボタン
90    $('.js-menu-btn').on('click', (e) => {
91      $('body').toggleClass('is-menu-open');
92    });
93  },
94  init() {
95    this.scroll();
96    this.active();
97  },
98};
99
100const scrollEffectModule = {
101  instance: null,
102  set() {
103    this.instance = new SCROLL_EFFECT_MODULE({
104      elem: '[data-scroll-effect]',
105      displayRatio: 0.7,
106    });
107  },
108  init() {
109    scrollEffectModule.set();
110  },
111};
112
113const modal = {
114  set() {
115    let _html =
116      '<section class="m-modal {{ defaultClassName }}" id="{{ id }}" data-modal-type>\n        <div class="m-modal__bg"></div>\n        <div class="m-modal__close-btn-wrap" data-modal-ui-close>\n          <div class="m-modal__close-btn">\n          </div>\n        </div>\n        <div class="m-modal__content">\n          {{ content }}\n        </div>\n      </section>';
117
118    const MM = new MODAL_MODULE({
119      defaultClassName: 'm-modal-custom',
120      customModalHtml: _html,
121    });
122  },
123  init() {
124    this.set();
125  },
126};