https://uchitama.com/assets/js/character.js

1'use strict';
2
3(function () {
4
5  // 変数
6  var breakPoint = 751;
7
8  var hash = window.location.hash;
9  var initialSlide = Number(hash.slice(1)) - 1;
10
11  var charaSwiper = null;
12
13  var $body = $("body");
14  var $detail = $(".c-detail");
15  var $chara = $(".p-chara__list");
16  var $charaList = $(".p-chara__item");
17  var $closeBtn = $(".c-detail__close");
18
19  var $circle = $(".c-circle");
20  var $circleItem = $(".c-circle__item");
21  var $circlePrev = $("#c-circle--prev");
22  var $circleNext = $("#c-circle--next");
23  var $circlePrevInner = $circlePrev.find(".c-circle__inner");
24  var $circleNextInner = $circleNext.find(".c-circle__inner");
25  var $circlePrevItemList = $circlePrev.find(".c-circle__item");
26  var $circleNextItemList = $circleNext.find(".c-circle__item");
27
28  // UA check
29  function initIEandEdge() {
30    $body.addClass("is-ie-edge");
31  }
32  function initIE() {
33    $body.addClass("is-ie");
34  }
35  function initEdge() {
36    $body.addClass("is-edge");
37  }
38  function initSafari() {
39    $body.addClass("is-safari");
40  }
41  function uaCheck() {
42    // ie and edge
43    var ua = window.navigator.userAgent.toLowerCase();
44    if (ua.indexOf('msie') != -1 || ua.indexOf('trident') != -1) {
45      initIEandEdge();
46      initIE();
47    } else if (ua.indexOf('edge') != -1) {
48      initIEandEdge();
49      initEdge();
50    } else if (ua.indexOf('chrome') != -1) {
51      //chrome
52    } else if (ua.indexOf('safari') != -1) {
53      initSafari();
54    }
55  }
56  uaCheck();
57
58  var openDetail = function openDetail() {
59    $detail.addClass("is-active");
60    $body.addClass("is-open-detail");
61  };
62
63  var closeDetail = function closeDetail() {
64    $detail.removeClass("is-active");
65    $body.removeClass("is-open-detail");
66    history.replaceState("", "", location.href.split("#")[0]);
67  };
68
69  var changeCircle = function changeCircle(currentIndex) {
70    $circleItem.removeClass("is-current").removeClass("is-prev").removeClass("is-next");
71    var _current = currentIndex;
72    var _prev = currentIndex - 1;
73    var _prev_prev = _prev - 1;
74    var _next = currentIndex + 1;
75    var _next_next = _next + 1;
76    if (_prev < 0) {
77      _prev += 10;
78    }
79    if (_prev_prev < 0) {
80      _prev_prev += 10;
81    }
82    if (_next > 9) {
83      _next -= 10;
84    }
85    if (_next_next > 9) {
86      _next_next -= 10;
87    }
88    $circlePrevItemList.eq(_prev).addClass("is-current");
89    $circlePrevItemList.eq(_prev_prev).addClass("is-next");
90    $circlePrevItemList.eq(_current).addClass("is-prev");
91    $circlePrevInner.css("background-color", $circlePrevItemList.eq(_prev).data("color"));
92
93    $circleNextItemList.eq(_next).addClass("is-current");
94    $circleNextItemList.eq(_next_next).addClass("is-prev");
95    $circleNextItemList.eq(_current).addClass("is-next");
96    $circleNextInner.css("background-color", $circleNextItemList.eq(_next).data("c

96olor"));
97  };
98
99  // swiperの生成
100  var createSwiper = function createSwiper() {
101    var windowWidth = window.innerWidth;
102    var swiperOption = {
103      hashNavigation: true,
104      slidesPerView: 'auto',
105      spaceBetween: 0,
106      followFinger: false,
107      mousewheel: true,
108      speed: 500,
109      loop: true,
110      on: {
111        init: function init() {
112          changeCircle(initialSlide);
113        }
114      }
115    };
116    if (windowWidth > breakPoint) {
117      swiperOption.direction = 'vertical';
118    }
119    charaSwiper = new Swiper('.c-detail', swiperOption);
120
121    // イベント設定
122    charaSwiper.on("slidePrevTransitionStart", function () {
123      changeCircle(charaSwiper.realIndex);
124    });
125
126    charaSwiper.on("slideNextTransitionStart", function () {
127      changeCircle(charaSwiper.realIndex);
128    });
129  };
130
131  // イベント設定
132
133  // ロード時、ハッシュがあれば詳細オープン
134  $(window).on("load", function () {
135    if (hash != "") {
136      openDetail();
137    }
138    createSwiper();
139    $(".c-detail").addClass("is-loaded");
140  });
141
142  $circlePrev.on("click", function () {
143    charaSwiper.slidePrev();
144  });
145
146  $circleNext.on("click", function () {
147    charaSwiper.slideNext();
148  });
149
150  $closeBtn.on("click", function () {
151    closeDetail();
152  });
153
154  $charaList.on("click", function () {
155    openDetail();
156    charaSwiper.slideTo($(this).index(), 0);
157  });
158
159  // change animal
160  setInterval(function () {
161    if (!$detail.hasClass("is-open-detail")) {
162      $chara.toggleClass("is-animal");
163    }
164  }, 4000);
165})();