https://bisquedoll-anime.com/assets/js/script.js

1'use strict';
2window.addEventListener('DOMContentLoaded', function () {
3  On.ready();
4});
5window.addEventListener('load', function () {
6  On.load();
7});
8
9const On = {
10  ready() {
11    if(new URL(location.href).searchParams.get('id')) {
12      if(document.querySelectorAll('.--story').length <= 0) location.href = location.origin + location.pathname;
13    }
14    $('body').addClass('is-ready');
15  },
16  load() {
17    op.init();
18    $('body').addClass('is-load');
19    scrollEffect.init();
20    menu.init();
21    modal.init();
22    accordion.init();
23    iframeWrap.init();
24    youtube.init();
25    lenis.init();
26    particleBg.init();
27    scrollDeco.init();
28    pageTop.init();
29    movieSlide.init();
30    kvNav.init();
31  },
32};
33
34const op = {
35  set() {
36    if (sessionStorage.getItem('access') === 'true') {
37      $('body').addClass('is-accessed');
38    } else {
39      sessionStorage.setItem('access', 'true');
40    }
41  },
42  init() {
43    this.set();
44  },
45};
46
47const scrollEffect = {
48  instance: null,
49  set() {
50    this.instance = new SCROLL_EFFECT_MODULE({
51      elem: '[data-scroll-effect]',
52    });
53  },
54  init() {
55    this.set();
56  },
57};
58
59const lenis = {
60  set() {
61    this.lenisLerp = 0.2;
62    this.lenisInstance = new Lenis({
63      smoothTouch: false,
64      smoothWheel: true,
65      lerp: lenis.lenisLerp,
66    });
67
68    // 慣性スクロール
69    function raf(time) {
70      lenis.lenisInstance.raf(time);
71      requestAnimationFrame(raf);
72    }
73    requestAnimationFrame(raf);
74  },
75  init() {
76    if ($(window).innerWidth() >= 900) {
77      this.set();
78    }
79  },
80};
81
82const pageTop = {
83  set() {
84    $('.js-pagetop').on('click', function () {
85      $('body,html').animate(
86        {
87          scrollTop: 0,
88        },
89        1000,
90        'easeInOutExpo'
91      );
92    });
93  },
94  init() {
95    this.set();
96  },
97};
98const menu = {
99  set() {
100    $('.js-menu-link').on('click', function () {
101      if ($('.is-top').length >= 1) {
102        $('body').removeClass('is-menu-active');
103        setTimeout(function () {
104          let target = location.hash.replace('#', '');
105          $('body,html').animate(
106            {
107              scrollTop: $('.p-'.concat(target)).offset().top,
108            },
109            1000,
110            'easeInOutExpo'
111          );
112        }, 100);
113      }
114    });
115    if (location.hash) {
116      if ($('.is-top').length >= 1) {
117        let target = location.hash.replace('#', '');
118        $('body,html').animate(
119          {
120            scrollTop: $('.p-'.concat(target)).offset().top,
121          },
122          1000,
123          'easeInOutExpo'
124        );
125      }
126    }
127    $('.js-menu-toggle').on('click', function () {
128      $('body').toggleClass('is-menu-active');
129    });
130    $(window).on('scroll', function () {
131      if ($(window).scrollTop() >= $('.js-kv').innerHeight()) {
132        $('body').addClass('is-scroll');
133      } else {
134        $('body').removeClass('is-scroll');
135      }
136    });
137  },
138  init() {
139    this.set();
140  },
141};
142
143const kvNav = {
144  set() {
145    $('[data-kv-nav]').on('click', function () {
146      $('[data-kv-nav]').removeClass('is-current');
147      $(this).addClass('is-current');
148      $('.js-kv-item').removeClass('is-current');
149      $('.js-kv-item')
150        .eq($(this).attr('data-kv-nav') - 1)
151        .addClass('is-current');
152    });
153  },
154  init() {
155    this.set();
156  },
157};
158
159const iframeWrap = {
160  set() {
161    if ($('.js-news-body').length >= 1) {
162      $('.js-news-body iframe').wrap('<div class="iframe_wrap"></div>');
163    }
164  },
165  init() {
166    this.set();
167  },
168};
169
170const scrollDeco = {
171  set() {
172    $(window).on('scroll', function () {
173      $('.js-deco').css('transform', 'rotate('.concat($(window).scrollTop() / 70, 'deg)'));
174    });
175  },
176  init() {
177    this.set();
178  },
179};
180
181const Default = {
182  mq: function mq() {
183    var breakpoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 961;
184    return matchMedia('(min-width:'.concat(breakpoint, 'px)')).matches;
185  },
186};
187const particleBg = {
188  set() {
189    tsParticles
190      .load('js-bg', {
191        fpsLimit: 60,
192        particles: {
193          number: {
194            value: Default.mq() ? 1 : 2,
195            density: {
196              enable: true,
197              value_area: 800,
198            },
199          },
200          stroke: {
201            color: {
202              value: 'random',
203            },
204            width: 0,
205          },
206          size: {
207            value: Default.mq() ? 20 : 15,
208            anim: {
209              enable: false,
210            },
211          },
212          move: {
213            enable: true,
214            speed: Default.mq() ? 3 : 2,
215            direction: 'bottom',
216            random: false,
217            straight: false,
218            bounce: false,
219            attract: {
220              enable: true,
221              rotateX: 600,
222              rotateY: 1200,
223            },
224          },
225          lineLinked: {
226            enable: false,
227          },
228          rotate: {
229            random: true,
230            direction: 'clockwise',
231            animation: {
232              enable: true,
233              speed: 20,
234              sync: false,
235            },
236          },
237          shape: {
238            type: 'image',
239            image: [
240              {
241                src: '/assets/img/bg_deco.svg',
242              },
243            ],
244
245            options: {
246              spiral: {
247                innerRadius: 1,
248                lineSpacing: 1.5,
249                fill: false,
250                close: false,
251              },
252            },
253          },
254        },
255        preset: 'basic',
256        background: {},
257      })
258      .then((container) => {
259        document.body.classList.add('is-particle-active');
260      })
261      .catch((error) => {
262        console.error(error);
263      });
264  },
265  init() {
266    if (document.querySelectorAll('#js-bg').length > 0) {
267      this.set();
268    }
269  },
270};
271const modal = {
272  set() {
273    let _html = '\n    <section class="m-modal {{ defaultClassName }}" id="{{ id }}" data-modal-type data-lenis-prevent>\n    <div class="m-modal__bg"></div>\n    <div class="m-modal__close-btn" data-modal-ui-close></div>\n      <div class="m-modal__content">\n        {{ content }}\n      </div>\n    </section>';
274
275    const MM = new MODAL_MODULE({
276      defaultClassName: 'm-modal-custom',
277      customModalHtml: _html,
278    });
279  },
280  init() {
281    this.set();
282  },
283};
284const youtube = {
285  id: $('[data-movie-id]').attr('data-movie-id'),
286  set() {
287    this.instance = new PLAYER_MODULE_YOUTUBE({
288      id: 'js-bgplayer',
289      videoid: this.id,
290      responsive: false,
291      muted: true,
292      loop: true,
293      ui_default_parts: false,
294
295      playerVars: {
296        autoplay: 1,
297      },
298    });
299  },
300  init() {
301    if (youtube.id) this.set();
302  },
303};
304const accordion = {
305  set() {
306    $('.js-accordion-head').on('click', function () {
307      $(this).toggleClass('is-accordion-active');
308      $(this).prev().slideToggle();
309    });
310  },
311  init() {
312    this.set();
313  },
314};
315const movieSlide = {
316  instance: null,
317  $elm: '.js-movie-slide',
318  config: {

319    speed: 800,
320    slidesPerView: 'auto',
321    spaceBetween: 10,
322    centeredSlides: true,
323    loop: true,
324    loopAdditionalSlides: 1,
325    pagination: {
326      el: '.js-movie-slide-pagination',
327      clickable: true,
328    },
329    navigation: {
330      nextEl: '.swiper-button-next',
331      prevEl: '.swiper-button-prev',
332    },
333    breakpoints: {
334      900: {
335        spaceBetween: 38,
336      },
337    },
338  },
339  set() {
340    if ($('.p-movie__contents').length >= 2) {
341      this.instance = new Swiper(this.$elm, this.config);
342    }
343  },
344  init() {
345    this.set();
346  },
347};