https://shenmue-anime.jp/assets/js/main.js?v=1661416733

1/* ====================
2
3- main.js
4
5==================== */
6var TRAILER_ID  = $('#trailer-id').val();
7$('#trailer-id').remove();
8
9var BREAKPOINT = 768,
10    w;
11
12w = $(window).width();
13
14if (w > BREAKPOINT) {
15
16  var tag = document.createElement('script');
17  tag.src = 'https://www.youtube.com/iframe_api';
18
19  var firstScriptTag = document.getElementsByTagName('script')[0];
20  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
21
22  function onYouTubeIframeAPIReady() {
23    ytPlayer = new YT.Player('trailer', {
24      videoId: TRAILER_ID,
25      playerVars: {
26        autoplay: 1,
27        controls: 0,
28        loop: 1,
29        playlist: TRAILER_ID,
30        rel: 0,
31        showinfo: 0
32      },
33      events: {
34        onReady: onPlayerReady
35      }
36    });
37  }
38
39  function onPlayerReady(event) {
40    event.target.setVolume(0);
41    event.target.playVideo();
42  }
43
44}
45
46var Main = (function() {
47
48  var h,
49      scrollTop,
50      scrollPos,
51      hasClassTop = $('main').children('div').hasClass('top'),
52      currentMovie = 0,
53      oldMovie = 0,
54      isOpenDrawer = false;
55
56  /* ====================
57  - init
58  ==================== */
59  function init() {
60
61    w = $(window).width();
62
63    $(window).on('load', function() {
64      setTimeout( function() {
65        hideLoading();
66      }, 1000);
67    });
68
69    $('.to-top').on('click', function() {
70      $('html, body').stop().animate({scrollTop: 0}, 1000, 'easeOutQuart');
71    });
72
73    if (hasClassTop) {
74      trailerModal();
75      changeKv(0);
76    } else {
77      moveSlide();
78    }
79
80    var mySwiper = new Swiper ('.swiper-container', {
81      autoplay: {
82        delay: 4000
83      },
84      loop: true,
85      pagination: {
86        el: '.swiper-pagination',
87        clickable: true
88      }
89    });
90
91    $('.character-nav-box').each(function(target) {
92      $(this).on('click', function() { openProf(target); });
93    });
94
95    $('.character-prof-nav-box').each(function(target) {
96      $(this).on('click', function() {
97        closeProf();
98        openProf(target);
99      });
100    });
101
102    $('.character-back').on('click', function() {
103      $('html, body').scrollTop(240);
104      closeProf();
105    });
106
107    if (w > BREAKPOINT) {
108      $('.movie-list ul li').each(function(i) {
109        $(this).on('click', function() { openMovieModal(i); });
110      });
111    }
112
113    $('.movie-modal, .movie-modal-close').on('click', function() { closeMovieModal(); });
114    $('.movie-modal-box').on('click', function() { event.stopPropagation(); });
115
116    if (w <= BREAKPOINT) {
117      $('header').on('click', function() {
118        if (!isOpenDrawer) {
119          openDrawer();
120        } else {
121          closeDrawer();
122        }
123      });
124    } else {
125      var shareBtn = document.querySelectorAll('.share ul li a');
126      for (var i = 0; i < shareBtn.length; i++) {
127        shareBtn[i].addEventListener('click', function(e) {
128           e.preventDefault();
129           window.open(this.href, 'SNS_window', 'width=600, height=500, menubar=no, toolbar=no, scrollbars=yes');
130        }, false);
131      }
132    }
133    
134    $('.kv-btn').each(function(i) {
135      
136      $(this).on('click', function(){
137                
138        if($(this).hasClass('act')) { return; }
139        changeKv(i);
140      });
141      
142    });
143    
144    /*STORY*/
145    if($('.contents').hasClass('sgl-story')) {
146      changeStory(0);
147      $('.sgl-story-img-box').each(function(i) {
148        $(this).on('click', function() {
149          changeStory(i);
150        });
151      });
152    }
153    
154/*     $('.goods-box-link').on('click',function(e){
155      e.preventDefault();  // 画面遷移を無効化
156      var url = $(this).attr('href');
157      //console.log(url);
158      goodsSetDetail(url);
159    })
160
161    $('#goods-detail-close').on('click',function(){
162      goodsCloseDetail();
163    })
164
165    $('#goods-detail-back').on('click',function(){
166      goodsCloseDetail();
167    }) */
168
169    /* ====================
170    - iziModal
171    ==================== */
172    function iziModalCastInit(){
173      $(".cast00").iziModal({
174        openFullscreen: true,
175        background: 'rgba(0, 0, 0, 0.8)',
176        transitionIn: 'fadeInUp',
177      });
178      $(".cast01").iziModal({
179        openFullscreen: true,
180        background: 'rgba(0, 0, 0, 0.8)',
181        transitionIn: 'fadeInUp',
182      });
183      $(".cast02").iziModal({
184        openFullscreen: true,
185        background: 'rgba(0, 0, 0, 0.8)',
186        transitionIn: 'fadeInUp',
187      });
188      $(".cast03").iziModal({
189        openFullscreen: true,
190        background: 'rgba(0, 0, 0, 0.8)',
191        transitionIn: 'fadeInUp',
192      });
193      $(".cast04").iziModal({
194        openFullscreen: true,
195        background: 'rgba(0, 0, 0, 0.8)',
196        transitionIn: 'fadeInUp',
197      });
198      $(".cast05").iziModal({
199        openFullscreen: true,
200        background: 'rgba(0, 0, 0, 0.8)',
201        transitionIn: 'fadeInUp',
202      });
203      $(".cast06").iziModal({
204        openFullscreen: true,
205        background: 'rgba(0, 0, 0, 0.8)',
206        transitionIn: 'fadeInUp',
207      });
208      $(".cast07").iziModal({
209        openFullscreen: true,
210        background: 'rgba(0, 0, 0, 0.8)',
211        transitionIn: 'fadeInUp',
212      });
213      $(".cast08").iziModal({
214        openFullscreen: true,
215        background: 'rgba(0, 0, 0, 0.8)',
216        transitionIn: 'fadeInUp',
217      });
218    }
219
220    visualChange();
221    menuOpen();
222    characterChenge();
223    iziModalCastInit();
224  }
225  
226  function changeStory(_id) {
227    
228    var _target = $('.sgl-story-thumb-img');
229    var imgPath;
230    
231    $('.sgl-story-img-box').each(function(i) {
232      
233      if(i == _id) {
234        $(this).addClass('act');
235        imgPath = $(this).find('img').attr('src');
236      } else {
237        $(this).removeClass('act');
238      }
239      
240    });
241    
242    _target.attr({'src':imgPath});
243
244  }
245  
246  function changeKv(_current) {
247        
248    $('.kv-box').each(function(i) {
249      if(_current == i) {
250        $(this).addClass('show');
251      } else {
252        $(this).removeClass('show');
253      }
254    });
255    
256    $('.kv-btn').each(function(i) {
257      if(_current == i) {
258        $(this).addClass('act');
259      } else {
260        $(this).removeClass('act');
261      }
262    });
263    
264    var scrollPosition = $(window).scrollTop();
265    
266    if(scrollPosition > 10) {
267      $('html,body').stop().animate({scrollTop:0},500,'swing');
268    } 
269  }
270  
271
272  /* ====================
273  - goodsModalSet
274  ==================== */
275  /* function goodsSetDetail(_url) { */
276  function goodsSetDetail(target) {
277/*     $.ajax({
278      url: _url,    // 表示させたいコンテンツがあるページURL
279      cache: false,
280      datatype: 'html',
281      success: function(html) {
282        console.log(html)
283        var h = $(html).find('#goods-detail-container');    // 表示させたいコンテンツの要素を指定
284        $('#goods-detail-popup-inner').html(h);    // append関数で指定先の要素へ出力
285        
286        goodsShowDetail();
287        
288      },
289      error: function() {
290       window.location.href = _url;
291      }
292    }); */
293
294    target = target.substr( 1, 1 )
295
296    if(target == "1"){
297      var contents = 
298      '<div id="goods-detail-container">' +
299      '<div id="goods-detail-thumb-container">' +
300      '<p id="goods-detail-thumb"><img src="" class="goods-detail-thumb-img"></p>' +
301      '<ul id="goods-detail-thumb-nav" class="flex">' +
302      '<li class="goods-detail-thumb-nav-box"><img src="https://shenmue-anime.jp/wp-content/uploads/2022/04/3bcf8c1802feefa2647d6dfe03dbdf87.jpg" class="goods-detail-thumb-nav-img"></li>' +
303      '</ul>' +
304      '</div>' +
305      '<div id="goods-detail-spec-container">' +
306      '<h4 class="goods-detail-ttl">Shenmue the Animationフレーム切手 BOX入りピンズセット</h4>' +
307      '<div id="goods-detail-spec-main">' +
308      '<div id="goods-detail-spec">' +
309      '<div class="goods-detail-spec-block">' +
310      '<p class="goods-detail-spec-ttl">発売日</p>' +
311      '<p class="goods-detail-spec-txt">2022年4月28日（木）</p>' +
312      '</div>' +
313      '<div class="goods-detail-spec-block">' +
314      '<p class="goods-detail-spec-ttl">価格</p>' +
315      '<p class="goods-detail-spec-txt">1セット 5,940円（税込）<br>※販売価格のほかに送料等(880円税込)が加算されます。<br>※郵便局窓口での受付はございません。</p>' +
316      '</div>' +
317      '<div class="goods-detail-spec-block">' +
318      '<p class="goods-detail-spec-ttl">商品説明</p>' +
319      '<div class="goods-detail-spec-txt"><p>商品内容</p>' +
320      '<p>・フレーム切手　(84円切手×5枚)x1シート</p>' +
321      '<p>・特製台紙x1枚 ・BOX入りピンズセット（5個入）</p>' +
322      '</div>' +
323      '</div>' +
324      '<div class="goods-detail-spec-block">' +
325      '<p class="goods-detail-spec-ttl">URL</p>' +
326      '<p class="goods-detail-spec-txt"><a href="https://www.shop.post.japanpost.jp/shop/g/gCS8970006901" target="_blank">https://www.shop.post.japanpost.jp/shop/g/gCS8970006901</a></p>' +
327      '</div>' +
328      '</div>' +
329      '</div>' +
330      '</div>' +
331      '</div>';
332
333      $('#goods-detail-popup-inner').html(contents);
334      goodsShowDetail();
335    } else if(target == "2"){
336      var contents = 
337      '<div id="goods-detail-container">' +
338      '<div id="goods-detail-thumb-container">' +
339      '<p id="goods-detail-thumb"><img src="" class="goods-detail-thumb-img"></p>' +
340      '<ul id="goods-detail-thumb-nav" class="flex">' +
341      '<li class="goods-detail-thumb-nav-box"><img src="https://shenmue-anime.jp/wp-content/uploads/2022/04/cb537b79a945d88f7e950d97bcca4bc5.jpg" class="goods-detail-thumb-nav-img"></li>' +
342      '</ul>' +
343      '</div>' +
344    
345      '<div id="goods-detail-spec-container">' +
346      '<h4 class="goods-detail-ttl">Shenmue the Animationフレーム切手 手ぬぐいセット</h4>' +
347      '<div id="goods-detail-spec-main">' +
348      '<div id="goods-detail-spec">' +
349      '<div class="goods-detail-spec-block">' +
350      '<p class="goods-detail-spec-ttl">発売日</p>' +
351      '<p class="goods-detail-spec-txt">2022年4月28日（木）</p>' +
352      '</div>' +
353      '<div class="goods-detail-spec-block">' +
354      '<p class="goods-detail-spec-ttl">価格</p>' +
355      '<p class="goods-detail-spec-txt">1セット3,960円（税込）<br>※販売価格のほかに送料等(880円税込)が加算されます。<br>※郵便局窓口での受付はございません。</p>' +
356      '</div>' +
357      '<div class="goods-detail-spec-block">' +
358      '<p class="goods-detail-spec-ttl">商品説明</p>' +
359      '<div class="goods-detail-spec-txt"><p>商品内容</p>' +
360      '<p>・フレーム切手　(84円切手×5枚)x1シート</p>' +
361      '<p>・特製台紙x1枚</p>' +
362      '<p>・手ぬぐいx1枚</p>' +
363      '</div>' +
364      '</div>' +
365      '<div class="goods-detail-spec-block">' +
366      '<p class="goods-detail-spec-ttl">URL</p>' +
367      '<p class="goods-detail-spec-txt"><a href="https://www.shop.post.japanpost.jp/shop/g/gCS8970006902" target="_blank">https://www.shop.post.japanpost.jp/shop/g/gCS8970006902</a></p>' +
368      '</div>' +
369      '</div>' +
370      '</div>' +
371      '</div>' +
372      '</div>';
373
374      $('#goods-detail-popup-inner').html(contents);
375      goodsShowDetail();
376    }
377  }
378  
379  function goodsShowDetail() {
380    $('#goods-detail-popup').scrollTop(0).stop().animate({'top':0},600,'easeOutQuart');
381  }
382
383  function goodsCloseDetail() {
384    $('#goods-detail-popup').stop().animate({'top':100+'vh'},400,'easeOutQuart');
385  }
386
387  $('.goods-box-link').on('click',function(e){
388    /* e.preventDefault(); */  // 画面遷移を無効化
389    /* var url = $(this).attr('href'); */
390    var target = $(this).attr('data-id')
391    console.log(target)
392    /* goodsSetDetail(url); */
393    goodsSetDetail(target);
394  })
395
396  $('#goods-detail-close').on('click',function(){
397    goodsCloseDetail();
398  })
399
400  $('#goods-detail-back').on('click',function(){
401    goodsCloseDetail();
402  })
403
404  if(document.URL.match('/products/goods')){
405    $('.products-nav .products-nav-box:first-of-type').css({'background':'#000'});
406    $('.products-nav .products-nav-box:first-of-type a').css({'color':'#40aeb2'});
407  }
408
409  if(document.URL.match('/products/music')){
410    $('.products-nav .products-nav-box:last-of-type').css({'background':'#000'});
411    $('.products-nav .products-nav-box:last-of-type a').css({'color':'#40aeb2'});
412  }
413
414  
415  /* ====================
416  - hideLoading
417  ==================== */
418  function hideLoading() {
419
420    $('.loading').stop().animate({'opacity': 0}, 600, function() {
421      $(this).css({'display': 'none'});
422    });
423
424  }
425
426  /* ====================
427  - openDrawer
428  ==================== */
429/*   function openDrawer() {
430
431    $('.menu').addClass('open');
432    $('.menu p').text('CLOSE');
433    $('.top-header, .contents-header').css({'background': 'none'});
434    $('.drawer').css({'display': 'block'}).stop().animate({'height': 100 + '%', 'opacity': 1, 'width': 100 + '%'}, 600, 'easeOutQuart');
435    isOpenDrawer = true;
436
437  } */
438
439  /* ====================
440  - closeDrawer
441  ==================== */
442/*   function closeDrawer() {
443
444    $('.drawer').stop().animate({'height': 110 + '%', 'opacity': 0, 'width': 110 + '%'}, 600, 'easeOutQuart', function() {
445      $('.drawer').css({'display': 'none'});
446    });
447    $('.top-header, .contents-header').css({'background': '#a31016'});
448    $('.menu p').text('MENU');
449    $('.menu').removeClass('open');
450    isOpenDrawer = false;

451
452  } */
453
454  /* ====================
455  - trailerModal
456  ==================== */
457  function trailerModal() {
458
459    $('.trailer').on('click', function() {
460      $('.trailer-modal').css({'display': 'flex'}).animate({'opacity': 1}, 800);
461      $('#trailer-video').attr('src', 'https://www.youtube.com/embed/' + TRAILER_ID + '?autoplay=1&rel=0').css({'display': 'block'});
462    });
463
464    $('.trailer-modal, .trailer-modal-close').on('click', function() {
465      $('.trailer-modal').stop().animate({'opacity': 0}, 600, function() {
466        $(this).css({'display': 'none'});
467        $('#trailer-video').attr('src', '');
468      });
469    });
470
471    $('.trailer-modal-box').on('click', function() { event.stopPropagation(); });
472
473  }
474
475  /* ====================
476  - openProf
477  ==================== */
478  function openProf(target) {
479
480    w = $(window).width();
481    if (w > BREAKPOINT) {
482      $('html, body').scrollTop(240);
483    } else {
484      $('html, body').scrollTop(0);
485    }
486    $('#character-nav-container').css({'display': 'none'});
487    $('.character-prof').css({'display': 'block'});
488    $('.character-prof-box .character-prof-list').eq(target).css({'display': 'block'}).addClass('act');
489    $('.character-prof-nav-box').eq(target).addClass('current');
490
491  }
492
493  /* ====================
494  - closeProf
495  ==================== */
496  function closeProf() {
497
498    $('.character-prof').css({'display': 'none'});
499    $('.character-prof-box .character-prof-list').css({'display': 'none'}).removeClass('act');
500    $('.character-prof-nav-box').removeClass('current');
501    $('#character-nav-container').css({'display': 'block'});
502
503  }
504
505  /* ====================
506  - openMovieModal
507  ==================== */
508  function openMovieModal(i) {
509
510    var MOVIE_ID = $('.movie-video-list li').eq(i).children('.movie-id').val();
511
512    $('.movie-modal').css({'display': 'flex'}).animate({'opacity': 1}, 800);
513    $('.movie-video-list li').eq(i).css({'display': 'block'});
514    w = $(window).width();
515    if (w > BREAKPOINT) {
516      $('.movie-video-list li').eq(i).children('iframe').attr('src', 'https://www.youtube.com/embed/' + MOVIE_ID + '?autoplay=1&rel=0').css({'display': 'block'});
517    } else {
518      $('.movie-video-list li').eq(i).children('iframe').attr('src', 'https://www.youtube.com/embed/' + MOVIE_ID + '?rel=0').css({'display': 'block'});
519    }
520
521  }
522
523  /* ====================
524  - closeMovieModal
525  ==================== */
526  function closeMovieModal() {
527
528    $('.movie-modal').stop().animate({'opacity': 0}, 600, function() {
529      $(this).css({'display': 'none'});
530      $('.movie-video-list li').css({'display': 'none'});
531      $('.movie-video-list li iframe').css({'display': 'none'}).attr('src', '');
532    });
533
534  }
535
536  /* ====================
537  - moveSlide
538  ==================== */
539  function moveSlide() {
540
541    w = $(window).width();
542
543    if (w > BREAKPOINT) {
544      var scrollSpeed = .2;
545      var imgW = 3709;
546    } else {
547      var scrollSpeed = .06;
548      var imgW = 692;
549    }
550    var posX = 0;
551
552    setInterval(function() {
553      if (posX >= imgW) { posX = 0; }
554      posX += scrollSpeed;
555      $('.slide').css('background-position', -posX + 'px 0');
556    }, 1);
557
558  }
559
560  /* ====================
561  - visualChange
562  ==================== */
563  function visualChange() {
564    $(".top-top-left picture").eq(0).css({ opacity: 1 });
565    $(".change-visual-pc div p").eq(0).css({ backgroundColor: "#fff", color: "#000" });
566    $(".change-visual-sp div p").eq(0).css({ backgroundColor: "#fff", color: "#000" });
567
568    $("[id=change-visual-btn]").each(function () {
569      $(this).on("click", function () {
570        var target = $(this).data("target");
571        var targetNumber = target.substr(6, 1) - 1;
572        Number(targetNumber);
573        var selectVisual = document.getElementById(target);
574        $(".visual").removeClass("visual-change").css({ opacity: 0 }, { transform: "scale(1.2, 1.2)" });
575        $(selectVisual).addClass("visual-change");
576        $(this).css({ backgroundColor: "#fff", color: "#000" });
577        $(".change-visual-pc div p").not(this).css({ backgroundColor: "#000", color: "#fff" });
578        $(".change-visual-sp div p").css({ backgroundColor: "#000", color: "#fff" });
579        $(".change-visual-sp div p").eq(targetNumber).css({ backgroundColor: "#fff", color: "#000" });
580        $("html,body").animate({ scrollTop: 0 }, 200, "swing", { queue: false });
581      });
582    });
583
584    $("[id=change-visual-btn-sp]").each(function () {
585      $(this).on("click", function () {
586        var target = $(this).data("target");
587        var targetNumber = target.substr(6, 1) - 1;
588        Number(targetNumber);
589        var selectVisual = document.getElementById(target);
590        $(".visual").removeClass("visual-change").css({ opacity: 0 }, { transform: "scale(1.2, 1.2)" });
591        $(selectVisual).addClass("visual-change");
592        $(this).css({ backgroundColor: "#fff", color: "#000" });
593        $(".change-visual-sp div p").not(this).css({ backgroundColor: "#000", color: "#fff" });
594        $(".change-visual-pc div p").css({ backgroundColor: "#000", color: "#fff" });
595        $(".change-visual-pc div p").eq(targetNumber).css({ backgroundColor: "#fff", color: "#000" });
596        $("html,body").animate({ scrollTop: 0 }, 200, "swing", { queue: false });
597      });
598    });
599  }
600
601  /* ====================
602  - menuOpen
603  ==================== */
604  function menuOpen(){
605    function open() {
606      $(".sp-layout").addClass("open");
607      $(".sp-layout p").text("CLOSE");
608        $(".sp-layout").css({ background: "none"});
609        $(".drawer").css({ display: "block" }).stop().animate(
610          {
611            right: "0",
612          },
613          600,
614          "easeOutQuart"
615        );
616    }
617    
618    function close() {
619        $(".drawer")
620        .stop()
621        .animate(
622          {
623            right: "-100%",
624          },
625          600,
626          "easeOutQuart",
627          function () {
628            $(".drawer").css({ display: "none" });
629          }
630        );
631        $(".sp-layout").css({ background: "#a37f28"});
632        $(".sp-layout p").text("MENU");
633        $(".sp-layout").removeClass("open");
634    } 
635    
636    $(".sp-layout").on("click", function () {
637      if ($(".sp-layout").hasClass("open")) {
638        close();
639      } else {
640        open();
641      }
642    });
643
644    var widthFlag = "";
645
646    $(window).on("load resize", function () {
647      widthCheck();
648    });
649    
650    function widthCheck() {
651      var winWidth = $(window).width();
652      if (winWidth <= 768 && widthFlag != "sp") {
653        widthFlag = "sp";
654      } else if (winWidth > 768 && widthFlag != "pc") {
655        widthFlag = "pc";
656        close();
657      }
658    }
659  }
660
661  /* ====================
662  - characterChenge
663  ==================== */
664  function characterChenge(){
665    $('#character-nav li').on('click', function(){
666      var index = $('#character-nav li').index(this);
667      $("#character-nav").css({ display: "none" });
668      $("#character-prof-container").css({ display: "flex", justifyContent: "center", alignItems: "center", flexDirection: "column"});
669      $("#character-prof .character-prof-box-wrap").eq(index).css({ display: "block" });
670      $("html, body").scrollTop(0);
671    });
672
673    $('#character-prof-nav p').on('click', function(){
674      var index = $('#character-prof-nav p').index(this);
675      $("#character-prof .character-prof-box-wrap").css({ display: "none" });
676      $("#character-prof .character-prof-box-wrap").eq(index).css({ display: "block" });
677      $("html, body").scrollTop(0);
678    });
679
680    $('[id=character-back]').on('click', function(){
681      $("#character-nav").css({ display: "flex" });
682      $("#character-prof-container").css({ display: "none" });
683      $("#character-prof .character-prof-box-wrap").css({ display: "none" });
684      $("html, body").scrollTop(0);
685    });
686  }
687
688  return {
689    init: init,
690    goodsShowDetail:goodsShowDetail
691  }
692
693})();
694
695$(function() { Main.init(); });