https://sk8-project.com/assets/js/sk8.default.js

1'use strict';
2
3var page = $('.l-wrapper').attr('data-page');
4
5(function () {
6  var body = $('body');
7  var jsMenu = $('.c-nav');
8  var jsMenuBtn = $('.c-hamburger');
9  var jsMenuItem = $('.c-nav__item');
10  jsMenuBtn.on('click', function () {
11    if (jsMenu.hasClass('is-open')) {
12      closeMenu();
13    } else {
14      body.addClass('is-modal-open');
15      jsMenu.addClass('is-open');
16      jsMenuBtn.addClass('is-open');
17      setTimeout(function () {
18        jsMenuItem.each(function (i) {
19          var split = $(this).find('.js-separate span');
20          split.each(function (j) {
21            setTimeout(function () {
22              split.eq(j).addClass('is-active');
23            }, 40 * j);
24          });
25        });
26      }, 600);
27    }
28  });
29
30  function closeMenu() {
31    body.removeClass('is-modal-open');
32    jsMenuBtn.removeClass('is-open');
33    jsMenu.removeClass('is-open');
34    $('.js-separate span').removeClass('is-active');
35  }
36
37  $('.js-pagetop').on('click', function () {
38    $('body,html').animate({
39      scrollTop: 0
40    }, 700, 'easeInOutCubic');
41    return false;
42  });
43  $('.js-innerlink').on('click', function () {
44    var target = $(this).attr('data-link');
45    var position = $(target).offset().top;
46    $('html, body').stop(true).animate({
47      scrollTop: position
48    }, 700, 'easeInOutCubic');
49  });
50  $('.js-separate').each(function () {
51    var self = this;
52    str;
53    var str = $(this).html().replace(/\n/g, '').replace(/<br>/g, '\n').replace(/<br class="is-sp">/g, '\r').replace(/<br class="is-pc">/g, '\t').replace(/&nbsp;/g, '\f');
54    $(self).html('');
55
56    for (var i = 0; i <= str.length; i++) {
57      var txt = '<span><span>' + str.substr(i, 1) + '</span></span>';
58      $(self).append(txt.replace('<span><span></span></span>', '').replace('<span><span> </span></span>', '').replace('<span><span>\n</span></span>', '<br>').replace('<span><span>\r</span></span>', '<br class="is-sp">').replace('<span><span>\t</span></span>', '<br class="is-pc">').replace('<span><span>\f</span></span>', '<span>&nbsp;</span>'));
59    }
60  });
61  $('.js-separate2').each(function () {
62    var self2 = this;
63    str2;
64    var str2 = $(this).html().replace(/\n/g, '').replace(/<br>/g, '\n').replace(/<br class="is-sp">/g, '\r').replace(/<br class="is-pc">/g, '\t').replace(/&nbsp;/g, '\f');
65    $(self2).html('');
66
67    for (var i = 0; i <= str2.length; i++) {
68      var txt2 = '<span>' + str2.substr(i, 1) + '</span>';
69      $(self2).append(txt2.replace('<span></span>', '').replace('<span> </span>', '').replace('<span>\n</span>', '<br>').replace('<span>\r</span>', '<br class="is-sp">').replace('<span>\t</span>', '<br class="is-pc">').replace('<span>\f</span>', '<span>&nbsp;</span>'));
70    }
71  });
72})();
73
74var wW = $(window).outerWidth();
75var wH = $(window).innerHeight();
76
77var updateDOM = function updateDOM() {
78  wW = $(window).outerWidth();
79  wH = $(window).innerHeight();
80};
81
82var scrollReverse = false;
83
84if (page == 'top') {
85  scrollReverse = true;
86}
87
88var scrollContent = {
89  param: {
90    elem: '.js-scroll',
91    displayRatio: 0.7,
92    displayReverse: scrollReverse,
93    addClassNameActive: 'is-scrolled',
94    on: {
95      In: function In(item, pos) {
96        if ($(item).has('.js-split')) {
97          var scrollTitle = $(item).find('.js-split');
98          scrollTitle.each(function (i) {
99            setTimeout(function () {
100              setTimeout(function () {
101                scrollTitle.eq(i).addClass('is-fase1');
102                setTimeout(function () {
103                  scrollTitle.eq(i).addClass('is-fase2');
104                }, 200);
105              }, 80 * i);
106            }, 400);
107          });
108        }
109
110        if ($(item).has('.js-separate2')) {
111          var scrollColoredTxt = $(item).find('.js-separate2 span');
112          scrollColoredTxt.each(function (j) {
113            setTimeout(function () {
114              setTimeout(function () {
115                scrollColoredTxt.eq(j).addClass('is-active');
116              }, 80 * j);
117            }, 500);
118          });
119        }
120
121        if ($(item).has('.js-scroll__list')) {
122          var scrollListItem = $(item).find('.js-scroll__list li');
123          scrollListItem.each(function (n) {
124            setTimeout(function () {
125              setTimeout(function () {
126                scrollListItem.eq(n).addClass('is-active');
127              }, 100 * n);
128            }, 500);
129          });
130        }
131      },
132      Out: function In(item, pos) {
133        setTimeout(function () {
134          $(item).find('.js-split').removeClass('is-fase1 is-fase2');
135        }, 400);
136      }
137    }
138  },
139  position: function position() {},
140  set: function set() {
141    this.module = new SCROLL_EFFECT_MODULE(this.param);
142  },
143  scroll: function scroll() {},
144  resize: function resize() {},

145  init: function init() {
146    this.set();
147  }
148};
149$(window).on('load', function () {
150  $('.l-wrapper').addClass('is-load');
151
152  if ($('.js-scroll').length) {
153    scrollContent.init();
154  }
155
156  if ($('.l-in')) {
157    var split = $('.l-in__title').children('span');
158    split.each(function (i) {
159      setTimeout(function () {
160        setTimeout(function () {
161          split.eq(i).addClass('is-fase1');
162          setTimeout(function () {
163            split.eq(i).addClass('is-fase2');
164          }, 200);
165        }, 80 * i);
166      }, 400);
167    });
168  }
169});
170$(window).on('load resize', function () {
171  updateDOM();
172});
173$(window).on('load scroll resize', function () {
174  var scT = $(window).scrollTop();
175  $('.js-parallax--big').each(function (i) {
176    var parallaxNum = Math.floor(scT * 0.12);
177    $(this).css({
178      transform: 'translate3d(0,' + -parallaxNum + 'px,0)'
179    });
180  });
181  $('.js-parallax--middle').each(function (j) {
182    var parallaxNum = Math.floor(scT * 0.08);
183
184    if ($(this).hasClass('-above')) {
185      $(this).css({
186        transform: 'translate3d(0,' + parallaxNum + 'px,0)'
187      });
188    } else if ($(this).hasClass('-bottom')) {
189      $(this).css({
190        transform: 'translate3d(0,' + -parallaxNum + 'px,0)'
191      });
192    }
193  });
194  $('.js-parallax--small').each(function (j) {
195    var parallaxNum = Math.floor(scT * 0.04);
196
197    if ($(this).hasClass('-above')) {
198      $(this).css({
199        transform: 'translate3d(0,' + parallaxNum + 'px,0)'
200      });
201    } else if ($(this).hasClass('-bottom')) {
202      $(this).css({
203        transform: 'translate3d(0,' + -parallaxNum + 'px,0)'
204      });
205    }
206  });
207});
208var Modal = {
209  instance: null,
210  init: function init() {
211    var _template = '' + '<div class="m-modal is-close" id="{{ id }}" data-modal-type>' + '  <div class="m-modal__wrap">' + '    <div class="m-modal__bg" data-modal-ui-close></div>' + '    <div class="m-modal__inner">' + '      <div class="m-modal__content">' + '        {{ content }}' + '      </div>' + '    </div>' + '    <div class="m-modal__close" data-modal-ui-close>' + '      <span></span>' + '      <span></span>' + '    </div>' + '  </div>' + '</div>';
212
213    this.instance = new MODAL_MODULE({
214      duration: 800,
215      zIndex: 10,
216      removeWrapperTag: false,
217      defaultModalStyle: false,
218      customModalHtml: _template,
219      customModalStyle: '<style>.m-modal {} </style>',
220      loadStart: false,
221      elemOutputSelector: '.l-wrapper',
222      elemYoutubePlayerAspectRatio: '16:9',
223      movie: {
224        youtube: {
225          height: '360',
226          width: '640',
227          playerVars: {
228            autoplay: 1,
229            playsinline: 1,
230            controls: 1,
231            disablekb: 0,
232            fs: 1,
233            loop: 0,
234            rel: 0
235          }
236        }
237      },
238      on: {
239        afterOpen: function afterOpen(data, target, state, elem) {
240          if (state.elemOpenHtml.match('m-modal__title')) {
241            var split = $('.m-modal .m-modal__title').children('span');
242            split.each(function (i) {
243              setTimeout(function () {
244                split.eq(i).addClass('is-active');
245              }, 40 * i);
246            });
247          }
248
249          if (state.elemOpenHtml.match('m-modal__item')) {
250            $('.m-modal__item').addClass('is-active');
251          }
252
253          if (state.elemOpenHtml.match('modal_visual')) {
254
255            $('.modal_visual-navi__item').not('is-current').click(function(){
256              let target = $(this).data('target');
257
258              $('.modal_visual__item.is-add').removeClass('is-add').addClass("is-remove");
259              setTimeout(function(){
260                $('.modal_visual__item').removeClass("is-remove");
261                $('.modal_visual__item[data-target="'+ target +'"]').addClass('is-add');
262              },400);
263
264              $('.modal_visual-navi__item').removeClass('is-current');
265              $(this).addClass('is-current');
266            })
267
268          }
269        }
270      }
271    });
272  }
273};
274
275if ($('[data-modal]').length) {
276  Modal.init();
277}