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

1'use strict';
2function _c(l) {
3  console.log(l);
4}
5
6$(window).on('load', function () {
7  $('body').addClass('is-open');
8
9  var swiper = new Swiper('.js-visual_slider', {
10    loop: true,
11    speed: 1200,
12    autoplay: {
13      delay: 5000,
14      disableOnInteraction: false,
15    },
16
17    effect: 'fade',
18    pagination: {
19      el: '.swiper-pagination',
20      clickable: true,
21    },
22  });
23
24  var shop_sw = new Swiper('.js-shop_slide', {
25    loop: true,
26    speed: 600,
27    spaceBetween : 12,
28    autoplay: {
29      delay: 3000,
30      disableOnInteraction: false,
31    },
32    pagination: {
33      el: '.swiper-pagination',
34      clickable: true,
35    },
36  });
37  
38
39  $('.main_area-visual-icon').click(function () {
40    swiper.slideNext();
41  });
42
43  $('a[href^="#"]').click(function () {
44    var adjust = -10;
45    var speed = 800;
46    var href = $(this).attr('href');
47    var target = $(href == '#' || href == '' ? 'html' : href);
48    var position = target.offset().top + adjust;
49    $('body,html').animate({scrollTop: position}, speed, 'easeOutQuad');
50
51    sc_navi.close();
52    //return false;
53  });
54  $('.page_top').click(function () {
55    var speed = 800;
56    $('body,html').animate({scrollTop: 0}, speed, 'easeOutQuad');
57  });
58
59  var textEffect = document.querySelectorAll('.js-trigger');
60  textEffect.forEach(function (target) {
61    gsap.to(target, {
62      scrollTrigger: {
63        trigger: target,
64        start: 'top 90%',
65        toggleClass: {
66          targets: target,
67          className: 'is-active',
68        },
69
70        once: true,
71      },
72    });
73  });
74  set_main.init();
75  sc_navi.init();
76});
77
78var sc_navi = {
79  sc_height: 0,
80  close: function close() {
81    $('.scroll_navi').removeClass('is-open');
82  },
83  set_size: function set_size() {
84    this.sc_height = $('#package').offset().top;
85  },
86  init: function init() {
87    var _this = this;
88
89    this.set_size();
90
91    $('.scroll_navi-btn').click(function () {
92      $('.scroll_navi').toggleClass('is-open');
93    });
94
95    $('.scroll_navi-bg').click(function () {
96      _this.close();
97    });
98
99    $(window)
100      .on('scroll', function () {
101        var st = $(window).scrollTop();
102        if (st > _this.sc_height) {
103          $('.scroll_navi-btn').addClass('is-show');
104        } else {
105          $('.scroll_navi-btn').removeClass('is-show');
106        }
107      })
108      .on('resize', function () {
109        _this.set_size();
110      });
111  },
112};
113
114var set_main = {
115  main_h: 0,
116  win_h: 0,
117  set_size: function set_size() {
118    var _this = this;
119    this.main_h = $('.main_area').outerHeight();
120    this.win_h = $(window).height();
121  },
122  set_scroll: function set_scroll() {
123    var _this = this;
124    $(window).on('scroll', function () {
125      var st = $(window).scrollTop();
126      if (st > _this.main_h - _this.win_h) {
127        $('.main_area-info').addClass('is_fixed').removeClass('is_stop');
128      } else {
129        $('.main_area-info').removeClass('is_fixed').addClass('is_stop');
130      }
131    });
132  },
133  check: function check() {
134    var _this = this;
135    var st = $(window).scrollTop();
136    if (st > _this.main_h - _this.win_h) {
137      $('.main_area-info').addClass('is_fixed').removeClass('is_stop');
138    } else {
139      $('.main_area-info').removeClass('is_fixed').addClass('is_stop');
140    }
141  },
142  init: function init() {
143    var _this = this;
144    this.set_size();
145    this.check();
146    this.set_scroll();
147    $(window).on('resize', function () {
148      _this.set_size();
149    });
150  },
151};
152
153var tag = document.createElement('script');
154
155tag.src = 'https://www.youtube.com/iframe_api';
156var firstScriptTag = document.getElementsByTagName('script')[0];
157firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
158var player;
159
160var ytID = ['JR69Mz8FhEA']; //複数対応のために配列で指定する
161var ytNow = 0;
162var ytSize = 'large';
163
164function onYouTubeIframeAPIReady() {
165  player = new YT.Player('yt_player', {
166    height: '100%',
167    width: '100%',
168    videoId: ytID[0],
169    events: {
170      onReady: onPlayerReady,
171      onStateChange: onPlayerStateChange,
172      onError: onPlayerError,
173    },
174
175    playerVars: {
176      rel: 0,
177      controls: 0,
178      disablekb: 1,
179      fs: 0,
180      iv_load_policy: 3,
181      showinfo: 0,
182      modestbranding: 1,
183      playsinline: 1,
184    },
185  });
186}
187function onPlayerReady(event) {
188  event.target.mute();
189  event.target.playVideo();
190}
191function onPlayerStateChange(event) {
192  if (event.data == YT.PlayerState.ENDED) {
193    ytNow++;
194    if (ytNow >= ytID.length) {
195      ytNow = 0;
196    }
197    if (ytNow < 0) {
198      ytNow = ytID.length - 1;
199    }
200    player.clearVideo();
201    player.loadVideoById(ytID[ytNow], 0, ytSize);
202    player.playVideo();
203  }
204}
205function stopVideo() {
206  player.stopVideo();
207}
208function onPlayerError(event) {
209  console.log(event);
210}
211
212var Modal = {
213  instance: null,

214  init: function init() {
215    var _this = this;
216    var _template =
217      '' +
218      '<div class="m-modal is-close" id="{{ id }}" data-modal-type>' +
219      '  <div class="m-modal__wrap">' +
220      '    <div class="m-modal__bg" data-modal-ui-close><div class="m_modal__charabg"></div></div>' +
221      '    <div class="m-modal__inner">' +
222      '      <div class="m-modal__content">' +
223      '        {{ content }}' +
224      '      </div>' +
225      '    </div>' +
226      '    <div class="m-modal__close" data-modal-ui-close data-pointer>' +
227      '    </div>' +
228      '  </div>' +
229      '</div>';
230
231    this.instance = new MODAL_MODULE({
232      duration: 400,
233      zIndex: 600,
234      removeWrapperTag: false,
235      defaultModalStyle: false,
236      customModalHtml: _template,
237      customModalStyle: '<style>.m-modal {} </style>',
238      loadStart: false,
239      elemOutputSelector: '.l_modal',
240      elemYoutubePlayerAspectRatio: '16:9',
241      movie: {
242        youtube: {
243          height: '360',
244          width: '640',
245          playerVars: {
246            autoplay: 1,
247            playsinline: 1,
248            controls: 1,
249            disablekb: 0,
250            fs: 1,
251            loop: 0,
252            rel: 0,
253          },
254        },
255      },
256
257      on: {},
258    });
259  },
260};
261
262if ($('[data-modal]').length) {
263  Modal.init();
264}