https://lycoris-recoil.com/assets/js/lyco_reco.common.js

1'use strict';
2function _defineProperty(obj, key, value) {
3  if (key in obj) {
4    Object.defineProperty(obj, key, {value: value, enumerable: true, configurable: true, writable: true});
5  } else {
6    obj[key] = value;
7  }
8  return obj;
9}
10function setSessionStorage(key, value) {
11  if (!window.sessionStorage) return;
12  try {
13    sessionStorage.setItem(key, value);
14  } catch (err) {
15    console.error(err);
16  }
17}
18$(document).ready(function () {
19  On.ready();
20  SmoothScroll.init();
21});
22
23$(window).on('load', function () {
24  On.load();
25
26  Menu.init();
27  FooterBnrSlide.init();
28  ModalModule.init();
29  Cursor.init();
30  Scroll.init();
31  Hov.init();
32  SmoothScroll.update();
33  setSessionStorage('op', 'true');
34  InView.init();
35});
36
37var $html = $('html');
38var $body = $('body');
39var Default = {
40  mq: function mq() {
41    var breakpoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1024;
42    return matchMedia('(min-width:'.concat(breakpoint, 'px)')).matches;
43  },
44  land: function land() {
45    return matchMedia('(orientation: landscape)').matches;
46  },
47  getParameterByName: function getParameterByName(name) {
48    var url = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : location.href;
49    name = name.replace(/[\[\]]/g, '\\$&');
50    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
51      results = regex.exec(url);
52    if (!results) return null;
53    if (!results[2]) return '';
54    return decodeURIComponent(results[2].replace(/\+/g, ' '));
55  },
56  userAgent: function userAgent() {
57    var ua = navigator.userAgent;
58    if (ua.indexOf('iPhone') > 0 || (ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0)) {
59      this.ua = 'sp';
60      if (ua.indexOf('iPhone') > 0) this.os = 'iOS';
61      if (ua.indexOf('Android') > 0) this.os = 'android';
62    } else if (ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0) {
63      this.ua = 'tablet';
64      if (ua.indexOf('iPad') > 0) this.os = 'iOS';
65      if (ua.indexOf('Android') > 0) this.os = 'android';
66    } else {
67      this.ua = 'pc';
68      this.os = 'pc';
69    }
70    if (ua.toLowerCase().indexOf('windows nt') !== -1) {
71      this.os = 'win';
72    } else if (this.ua === 'pc' && ua.toLowerCase().indexOf('mac os x') !== -1) {
73      this.os = 'mac';
74    }
75
76    if (ua.toLowerCase().indexOf('msie') !== -1 || ua.toLowerCase().indexOf('trident') !== -1) {
77      this.browser = 'ie';
78    } else if (ua.toLowerCase().indexOf('edge') !== -1) {
79      this.browser = 'html_edge';
80    } else if (ua.toLowerCase().indexOf('edg') !== -1) {
81      this.browser = 'edge';
82    } else if (ua.toLowerCase().indexOf('chrome') !== -1) {
83      this.browser = 'chrome';
84    } else if (ua.toLowerCase().indexOf('safari') !== -1) {
85      this.browser = 'safari';
86    } else if (ua.toLowerCase().indexOf('firefox') !== -1) {
87      this.browser = 'firefox';
88    } else {
89      this.browser = 'other';
90    }
91    this.setUa();
92  },
93  zeroPadding: function zeroPadding(num) {
94    var length = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
95    return ('0000000000' + num).slice(-length);
96  },
97  setUa: function setUa() {
98    $html.attr('data-ua', this.ua || '');
99    $html.attr('data-os', this.os || '');
100    $html.attr('data-browser', this.browser || '');
101  },
102  init: function init() {
103    this.userAgent();
104  },
105};
106
107Default.init();
108
109var On = {
110  ready: function ready() {
111    $body.addClass('is-ready');
112  },
113  load: function load() {
114    $body.addClass('is-load');
115  },
116};
117
118var Menu = {
119  config: {
120    wrap: '.js-wrap',
121    btn: '.js-menu',
122    area: 'js-menu-area',
123    open: '.js-menu-open',
124    close: '.js-menu-close',
125  },
126
127  param: {
128    timer: 400,
129    duration: 850,
130  },
131
132  state: {
133    isDone: true,
134    open: false,
135  },
136
137  timer: undefined,
138  toggle: function toggle() {
139    if (!this.state.open) {
140      this.open();
141    } else {
142      this.close();
143    }
144  },
145  open: function open() {
146    if (!this.state.open) {
147      clearTimeout(this.timer);
148      this.state.open = true;
149      $body.addClass('is-menu-show');
150      setTimeout(function () {
151        $body.addClass('is-menu-open');
152      }, 10);
153    }
154  },
155  close: function close() {
156    this.state.open = false;

157    $body.removeClass('is-menu-open');
158    this.timer = setTimeout(function () {
159      $body.removeClass('is-menu-show');
160    }, this.param.duration);
161  },
162  click: function click() {
163    var _this = this;
164    $body.on('click', this.config.btn, function () {
165      _this.toggle();
166    });
167    $body.on('click', this.config.open, function () {
168      _this.open();
169    });
170    $body.on('click', this.config.close, function () {
171      _this.close();
172    });
173  },
174  init: function init() {
175    this.click();
176  },
177};
178
179var FooterBnrSlide = {
180  instance: undefined,
181  config: {
182    elem: '.js-footer-bnr',
183    list: '.js-footer-bnr-list',
184    item: '.js-footer-bnr-item',
185    img: '.js-footer-bnr-img',
186    change: '.js-footer-bnr-change',
187    nav: {
188      area: '.js-footer-bnr-nav',
189      prev: '.js-footer-bnr-prev',
190      next: '.js-footer-bnr-next',
191    },
192  },
193
194  data: [],
195  state: {
196    init: false,
197    clickTimer: undefined,
198  },
199
200  props: {
201    init: false,
202    speed: 800,
203    direction: 'horizontal',
204    slidesPerView: 3,
205    spaceBetween: 20,
206    // threshold: 9999,
207    runCallbacksOnInit: true,
208    loop: true,
209    // effect: 'fade',
210    // autoHeight: true,
211    loopAdditionalSlides: 1,
212    touchStartPreventDefault: false,
213    followFinger: false,
214    preloadImages: false,
215    slideActiveClass: 'is-current',
216    slideDuplicateActiveClass: 'is-current is-clone',
217    slideNextClass: 'is-next',
218    slideDuplicateNextClass: 'is-next is-clone',
219    slidePrevClass: 'is-prev',
220    slideDuplicatePrevClass: 'is-prev is-clone',
221    containerModifierClass: 'js-footer-bnr',
222    wrapperClass: 'js-footer-bnr-list',
223    slideClass: 'js-footer-bnr-item',
224    breakpoints: {
225      960: {
226        slidesPerView: 2,
227        spaceBetween: 8,
228      },
229    },
230
231    navigation: {
232      nextEl: '.js-footer-bnr-next',
233      prevEl: '.js-footer-bnr-prev',
234      disabledClass: 'is-disable',
235    },
236
237    pagination: {
238      el: '.js-footer-bnr-pagination',
239      bulletElement: 'li',
240      bulletClass: 'l-footer_bnr__pagination-item',
241      bulletActiveClass: 'is-current',
242      type: 'bullets',
243      clickable: true,
244    },
245
246    on: {
247      init: function init() {
248        this.update();
249      },
250    },
251  },
252
253  set: function set() {
254    if (!this.state.init) {
255      this.state.init = true;
256      if ($(this.config.item).length <= 2) {
257        this.props.loop = false;
258        this.props.pagination = false;
259      }
260      this.instance = new Swiper(this.config.elem, this.props);
261      this.instance.init();
262    }
263  },
264  destroy: function destroy() {
265    if (this.state.init) {
266      this.state.init = false;
267      this.instance.destroy();
268    }
269  },
270  init: function init() {
271    this.mq = Default.mq();
272    if ($(this.config.item).length > 0) {
273      this.set();
274    }
275  },
276};
277
278var ModalModule = {
279  instance: null,
280  set: function set() {
281    var _playerVars;
282    var _template =
283      '' +
284      '<section class="m-modal is-close" id="{{ id }}" data-modal-type>' +
285      '  <div class="m-modal__bg" data-modal-ui-close></div>' +
286      '  <div class="m-modal__content">' +
287      '    {{ content }}' +
288      '  </div>' +
289      '<div class="m-modal__close" data-modal-ui-close>\n' +
290      '  <div class="m-modal__close-in">\n' +
291      '  </div>\n' +
292      '</div>' +
293      '</section>';
294
295    this.instance = new MODAL_MODULE({
296      duration: 0,
297      customModalHtml: _template,
298      elemOutputSelector: '.js-wrap',
299      defaultModalStyle: false,
300      zIndex: 10,
301      elemYoutubePlayerAspectRatio: '16:9',
302      movie: {
303        youtube: {
304          playerVars:
305            ((_playerVars = {
306              rel: 0,
307              loop: 1,
308              fs: 0,
309              autoplay: 1,
310              controls: 1,
311              showinfo: 0,
312              disablekb: 1,
313              playsinline: 1,
314            }),
315            _defineProperty(_playerVars, 'playsinline', 1),
316            _defineProperty(_playerVars, 'modestbranding', 1),
317            _defineProperty(_playerVars, 'suggestedQuality', 'hd1080'),
318            _defineProperty(_playerVars, 'iv_load_policy', 3),
319            _defineProperty(_playerVars, 'html5', 1),
320            _playerVars),
321        },
322      },
323
324      on: {

325        init: function init() {},
326        prepOpen: function prepOpen() {
327          if (Default.ua === 'pc') {
328            SmoothScroll.stop();
329          }
330        },
331        afterOpen: function afterOpen(data, target) {
332          $body.addClass('is-modal-show');
333          var templateType = $(target).attr('data-modal-category');
334          if (templateType) {
335            $('.m-modal').attr('data-modal-category', templateType);
336          }
337        },
338        afterClose: function afterClose() {
339          $body.removeClass('is-modal-show');
340          setTimeout(function () {
341            $('.m-modal').removeAttr('data-modal-category');
342          }, 1000);
343        },
344        prepClose: function prepClose() {
345          if (Default.ua === 'pc') {
346            SmoothScroll.start();
347          }
348        },
349      },
350    });
351  },
352  update: function update() {
353    this.instance.Update();
354  },
355  click: function click() {},
356  init: function init() {
357    this.set();
358  },
359};
360
361var Scroll = {
362  config: {
363    elem: '[data-anchor]',
364    hasClass: 'js-scroll-animation',
365  },
366
367  parameter: {
368    speed: 1200,
369    easing: 'easeOutQuart',
370  },
371
372  data: function data(e) {
373    var dataScroll = typeof e === 'string' ? e : e.attr('data-anchor');
374    var offsetData = typeof e === 'string' ? 0 : isNaN(parseFloat(e.attr('data-anchor-offset'))) ? e.attr('data-anchor-offset') : parseFloat(e.attr('data-anchor-offset'));
375    var offset = 0;
376    if (typeof offsetData === 'string') {
377      offset = $(offsetData).innerHeight();
378    } else if (typeof offsetData === 'number') {
379      offset = offsetData;
380    }
381    var destination = '#' + dataScroll;
382    if (dataScroll === 'top') {
383      destination = 'body';
384    }
385    var scrollHeight = $(destination).offset().top;
386    this.scroll(scrollHeight, offset);
387  },
388  hash: function hash(e) {
389    var href = $(e).attr('href');
390    var target = $(href == '#' || href == '' ? 'html' : href);
391    var position = target.offset().top;
392    this.scroll(position);
393  },
394  scroll: function scroll(position, offset) {
395    $('html,body').animate(
396      {
397        scrollTop: position - 100,
398      },
399      this.parameter.speed,
400      this.parameter.easing
401    );
402  },
403  click: function click() {
404    var _this2 = this;
405    $('.js-wrap').on('click', this.config.elem, function (e) {
406      _this2.data($(e.currentTarget));
407    });
408  },

409  anchor: function anchor() {
410    var _anchor = Default.getParameterByName('scroll');
411    if (_anchor) {
412      this.data(_anchor);
413    }
414  },
415  init: function init() {
416    if (Default.ua !== 'pc') {
417      this.anchor();
418      this.click();
419    }
420  },
421};
422
423var SmoothScroll = {
424  instance: undefined,
425  state: {
426    move: false,
427    init: false,
428  },
429
430  op: false,
431  set: function set() {
432    this.instance = new LocomotiveScroll({
433      el: document.querySelector('[data-scroll-container]'),
434      smooth: true,
435      // repeat: true,
436      offset: ['-50%', 0],
437      class: 'is-active',
438      firefoxMultiplier: 500,
439      reloadOnContextChange: true,
440      tablet: {
441        smooth: false,
442        breakpoint: Default.ua === 'tablet' ? winW : 0,
443      },
444
445      smartphone: {
446        smooth: false,
447        breakpoint: Default.ua === 'sp' ? winW : 0,
448      },
449
450      scrollbarClass: 'c-scrollbar',
451    });
452
453    this.state.init = true;
454    this.event();
455    this.update();
456  },
457  update: function update() {
458    if (Default.ua === 'pc' && this.instance) {
459      this.instance.update();
460    }
461  },
462  start: function start() {
463    if (Default.ua === 'pc' && this.instance) {
464      this.instance.start();
465    }
466  },
467  stop: function stop() {
468    if (Default.ua === 'pc' && this.instance) {
469      this.instance.stop();
470    }
471  },
472  define: function define() {},
473  destroy: function destroy() {
474    this.instance.destroy();
475    this.state.init = false;
476  },
477  event: function event() {
478    this.instance.on('call', function (index, _dir) {});
479    this.instance.on('scroll', function (event) {});
480  },
481  click: function click() {
482    var _this3 = this;
483    var main = document.querySelector('.l-main');
484    document.querySelectorAll('[data-anchor]').forEach(function (target) {
485      var data = target.getAttribute('data-anchor');
486      target.addEventListener('click', function () {
487        if (data === 'top') {
488          _this3.instance.scrollTo(0);
489        } else {
490          _this3.instance.scrollTo(document.querySelector(''.concat(data)), {
491            offset: -200,
492          });
493        }
494      });
495    });
496  },
497  parallax: function parallax() {
498    var winH = window.innerHeight;
499    $('[data-scroll-sp]').each(function (index, target) {
500      var $target = $(target);
501      var data = $target.attr('data-scroll-speed');
502      var rect = target.getBoundingClientRect();
503      var rect_top = rect.top;
504      if (Math.abs(rect_top) < winH) {
505        var _ratio = rect_top / winH;
506        $target.css({
507          transform: 'translate3d(0, '.concat(_ratio * 40 * data, 'px, 0)'),
508        });
509      }
510    });
511  },
512  scroll: function scroll() {
513    $(window).on('scroll', this.parallax.bind(this));
514  },
515  init: function init() {
516    if (Default.ua === 'pc') {
517      this.click();
518      this.set();
519    } else {
520      this.parallax();
521      this.scroll();
522    }
523  },
524};
525
526var Hov = {
527  $el: undefined,
528  template: function template() {
529    return '<div class="c-hov js-hov-item"><div class="c-hov__circle js-hov-circle"></div></div>';
530  },
531  set: function set() {
532    var _this4 = this;
533    this.$el.each(function (index, el) {
534      $(el).append(_this4.template());
535    });
536  },
537  event: function event() {
538    $('.js-hov').on('mouseenter', '.js-hov-item', function (event) {
539      var $currentTarget = $(event.currentTarget);
540      var $target = $currentTarget.find('.js-hov-circle');
541
542      var _top = event.offsetY / $currentTarget.innerHeight();
543      var _left = event.offsetX / $currentTarget.innerWidth();
544
545      _top = _top > 1 ? 1 : _top < 0 ? 0 : _top;
546      _left = _left > 1 ? 1 : _left < 0 ? 0 : _left;
547
548      $target.css({
549        top: ''.concat(_top * 100, '%'),
550        left: ''.concat(_left * 100, '%'),
551      });
552    });
553  },
554  init: function init() {
555    this.$el = $('.js-hov');
556    if (this.$el.length > 0) {
557      this.set();
558      this.event();
559    }
560  },
561};
562
563// スクロール表示範囲検知
564var InView = {
565  instance: undefined,
566  instanceBg: undefined,
567  $area: undefined,
568  $areaBg: undefined,
569  set: function set() {
570    var _this5 = this;
571    this.instance = new IntersectionObserver(
572      function (e) {
573        for (var i = 0; i < e.length; i++) {
574          if (e[i].isIntersecting) {
575            $(e[i].target).addClass('is-view');
576            $(e[i].target).addClass('is-in-view');
577          } else {
578            $(e[i].target).removeClass('is-view');
579            $(e[i].target).removeClass('is-in-view');
580          }
581        }
582      },
583      {
584        root: null,

585        rootMargin: '0px 0px -10% 0px',
586        threshold: 0,
587      }
588    );
589
590    this.$area.each(function (i, e) {
591      _this5.instance.observe(e);
592    });
593  },
594  init: function init() {
595    this.$area = $('[data-inview]');
596    if (this.$area.length > 0) {
597      this.set();
598    }
599  },
600};
601
602var Cursor = {
603  config: {
604    area: '.js-cursor',
605    point: '.js-cursor-point',
606    bg: '.js-cursor-bg',
607  },
608
609  state: {
610    pointer: {
611      x: 0,
612      y: 0,
613    },
614
615    mouse: {
616      x: 0,
617      y: 0,
618    },
619  },
620
621  timer: undefined,
622  set: function set() {
623    var _this6 = this;
624    window.requestAnimationFrame(function () {
625      _this6.state.pointer.y += _this6.state.mouse.y - _this6.state.pointer.y;
626      _this6.state.pointer.x += _this6.state.mouse.x - _this6.state.pointer.x;
627      $(_this6.config.point).css({
628        transform: 'translate('.concat(_this6.state.pointer.x, 'px,').concat(_this6.state.pointer.y, 'px)'),
629      });
630
631      $(_this6.config.bg).css({
632        transform: 'translate('.concat(_this6.state.pointer.x, 'px,').concat(_this6.state.pointer.y, 'px)'),
633      });
634
635      _this6.set();
636    });
637  },
638  event: function event() {
639    var _this7 = this;
640    $(window).on('mousemove', function (e) {
641      clearTimeout(_this7.timer);
642      $(_this7.config.area).removeClass('is-hide');
643      _this7.state.mouse.x = e.clientX;
644      _this7.state.mouse.y = e.clientY;
645      _this7.timer = setTimeout(function () {
646        $(_this7.config.area).addClass('is-hide');
647      }, 10000);
648    });
649    $(document).on('mouseenter', '[data-pointer]', function () {
650      $(_this7.config.area).addClass('is-active');
651      $(_this7.config.area).attr('data-color', Math.floor(Math.random() * (5 - 1 + 1) + 1));
652    });
653    $(document).on('mouseleave', '[data-pointer]', function () {
654      $(_this7.config.area).removeClass('is-active');
655    });
656  },
657  init: function init() {
658    $(this.config.area).addClass('is-hide');
659    this.set();
660    this.event();
661  },
662};