https://www.pokemon.jp/index_assets/js/top.js

1/////////Pokemon Daisuki 2021/////////
2var loadflag = true;
3var windowwidth = window.innerWidth || document.documentElement.clientWidth || 0;
4
5//load完了
6$(window).on('load', function () { if (loadflag) loadfunc(); });
7
8var preloadImages = [
9  '/index_assets/img/logo_daisuki.png',
10  '/index_assets/img/puppet/m1.png',
11  '/index_assets/img/puppet/m2.png',
12  '/index_assets/img/puppet/m3.png',
13  '/index_assets/img/puppet/m4.png',
14  '/index_assets/img/puppet/m5.png'
15];
16
17$(function () {
18  //load強制
19  setTimeout(function () { if (loadflag) loadfunc(); }, 1000);
20
21  //preload
22  for (let i = 0; i < preloadImages.length; i++) {
23    var img = document.createElement('img');
24    img.src = preloadImages[i];
25  }
26
27  //TOP ppms
28  for (let i = 0; i < 4; i++) {
29    $('.ppm' + (i + 2)).addClass('puppet' + ppms[i]);
30  }
31
32  //pagelink（存在しないIDでも落ちないように）
33  $('a[href^="#"]').on('click', function (e) {
34    var href = $(this).attr('href');
35    var target = $(href == '#' || href == "" ? 'html' : href);
36
37    // 対象が存在しない場合は何もしない（エラー防止）
38    if (!target.length) return;
39
40    e.preventDefault();
41    var position = target.offset().top;
42    $('body,html').animate({ scrollTop: position }, 600);
43  });
44
45  //pagetop
46  if ($(this).scrollTop() > 200) { setPT(); }
47  $(window).scroll(function () {
48    setPT();
49  });
50  $('.footerPagetop a').on('click', function () {
51    $('body, html').animate({ scrollTop: 0 }, 600);
52    return false;
53  });
54
55  //timeline-open
56  if ($(window).width() >= 768) {
57    $('.tw-timeline h2').on("click", function () {
58      $('.tw-timeline').toggleClass('open');
59    });
60  }
61
62  //pic-fade
63  if ($('.la-pic-fade').length) {
64    var setPic = '.la-pic-fade';
65    $(setPic).children('img').css({ opacity: '0' });
66    $(setPic + ' img:first').stop().animate({ opacity: '1', zIndex: '10' }, 1000);
67    setInterval(function () {
68      $(setPic + ' :first-child')
69        .animate({ opacity: '0' }, 1000)
70        .next('img')
71        .animate({ opacity: '1' }, 1000)
72        .end()
73        .appendTo(setPic);
74    }, 3000);
75  }
76
77  if ($('.paint-pic-fade').length) {
78    var setPic2 = '.paint-pic-fade';
79    $(setPic2).children('img').css({ opacity: '0' });
80    $(setPic2 + ' img:first').stop().animate({ opacity: '1', zIndex: '10' }, 1000);
81    setInterval(function () {
82      $(setPic2 + ' :first-child')
83        .animate({ opacity: '0' }, 1000)
84        .next('img')
85        .animate({ opacity: '1' }, 1000)
86        .end()
87        .appendTo(setPic2);
88    }, 3000);
89  }
90
91  //API
92  const info3api = '/api/info/?limit=3';
93  const comic4api = '/api/look/comic/?limit=4';
94  let info3access = location.host.indexOf('daisuki') == 0 ? '/index_assets/_sample/info3.txt' : info3api;
95  let comic4access = location.host.indexOf('daisuki') == 0 ? '/index_assets/_sample/comic4.txt' : comic4api;
96
97  $.getJSON(info3access, function (info3) {
98    var _tmphtml = '';
99    $.each(info3.results, function () {
100      _tmphtml += '<div class="info-item"><a class="info-link" href="' + this.uniq + '"><div class="info-pic"><img src="' + this.img_1 + '" alt=""></div><div class="info-title"><span>' + this.title + '</span></div></a></div>';
101    });
102    $('#info3').html(_tmphtml);
103  });
104
105  $.getJSON(comic4access, function (comic4) {
106    var _tmphtml = '';
107    $.each(comic4.results, function () {
108      _tmphtml += '<div class="comic-item"><a class="comic-link" href="' + this.uniq + '"><div class="comic-pic"><img class="lazyload" data-src="' + this.img_1 + '" alt=""></div><div class="comic-title">' + this.title + '</div></a></div>';
109    });
110    $('#comic4').html(_tmphtml);
111  });
112
113  //SP MENU-open
114  if ($(window).width() >= 768) { } else {
115    $('.headerMenuBtn').on("click", function () {
116      $('.headerMenuGroup').addClass('is-open');
117      $('body').addClass('scroll-hidden');
118    });
119    $('.headerMenuGroup__close').on("click", function () {
120      $('.headerMenuGroup').removeClass('is-open');
121      $('body').removeClass('scroll-hidden');
122    });
123  }
124
125  //SP hover
126  if (ua.isiOS || ua.isAndroid) {
127    $('a')
128      .on('touchstart', function () {
129        $(this).addClass('hover');
130      })
131      .on('touchend', function () {
132        $(this).removeClass('hover');
133        return;
134      });
135
136    $('a').on("click", function () {
137      $(this).css("transition", "none");
138    });
139  }
140
141  windowwidth = $(window).width();
142
143  //body class
144  if (ua.isiOS || ua.isAndroid) {
145    $('body').addClass('sp');
146  } else {
147    $('body').addClass('pc');
148  }
149});
150
151//scroll
152$(window).on('load scroll', function () {
153  var trigger = $(document).scrollTop() + (window.innerHeight / 1.2);
154  var trigger2 = $(document).scrollTop() + (window.innerHeight / 1.5);
155
156  $('.fade').each(function () {
157    if (trigger > $(this).offset().top) {
158      $(this).addClass('fadeIn');
159      $(this).removeClass('fade');
160    }
161  });
162
163  $('.addon').each(function () {
164    if (trigger2 > $(this).offset().top) {
165      $(this).addClass('on');
166      $(this).removeClass('addon');
167    }
168  });
169
170  $('.addon2').each(function () {
171    if (trigger > $(this).offset().top) {
172      $(this).addClass('on');
173      $(this).removeClass('addon2');
174    }
175  });
176});
177
178function loadfunc() {
179  loadflag = false;

180  $('.loadon').addClass('on');
181  $('.loadon').removeClass('loadon');
182}
183
184function setPT() {
185  if ($(this).scrollTop() > 200) {
186    $('.footerPagetop').addClass('is-show');
187
188    // 暗黙グローバル回避（ローカル変数化）
189    var scrollHeight = $(document).height();
190    var scrollPosition = window.innerHeight + $(window).scrollTop();
191    var footHeight = $('.footerCopy').innerHeight();
192
193    if ((scrollHeight - scrollPosition) <= footHeight) {
194      $('.footerPagetop').addClass('end');
195    } else {
196      $('.footerPagetop').removeClass('end');
197    }
198  } else {
199    $('.footerPagetop').removeClass('is-show');
200  }
201}
202
203//ランダム4
204var ppms = [];
205var min = 2, max = 16;
206for (let i = min; i <= max; i++) {
207  while (true) {
208    var tmp = Math.floor(Math.random() * (max - min + 1)) + min;
209    if (!ppms.includes(tmp)) {
210      ppms.push(tmp);
211      break;
212    }
213  }
214}
215
216//orientationchange resize
217$(window).on('orientationchange resize', function () {
218  if (
219    (windowwidth < 768 && $(window).width() > 767) ||
220    (windowwidth > 767 && $(window).width() < 768)
221  ) {
222    location.reload();
223  }
224  windowwidth = $(window).width();
225});
226
227//環境判別
228var ua = {};
229ua.name = window.navigator.userAgent.toLowerCase(),
230  ua.isOldEdge = ua.name.indexOf("applewebkit") >= 0 && ua.name.indexOf("edge/") >= 0,
231  ua.isNewEdge = ua.name.indexOf("applewebkit") >= 0 && ua.name.indexOf("edg/") >= 0,
232  ua.isEdge = ua.isOldEdge || ua.isNewEdge,
233  ua.isIE = ua.name.indexOf("msie") >= 0 || ua.name.indexOf("trident") >= 0,
234  ua.isiPhone = ua.name.indexOf("iphone") >= 0,
235  ua.isiPod = ua.name.indexOf("ipod") >= 0,
236  ua.isiPad = ua.name.indexOf("ipad") > -1 || ua.name.indexOf("macintosh") > -1 && "ontouchend" in document,
237  ua.isiOS = ua.isiPhone || ua.isiPod || ua.isiPad,
238  ua.isAndroid = ua.name.indexOf("android") >= 0,
239  ua.isTablet = ua.isiPad || ua.isAndroid && ua.name.indexOf("mobile") < 0,
240  ua.isIE && (ua.verArray = /(msie|rv:?)\s?([0-9]{1,})([\.0-9]{1,})/.exec(ua.name), ua.verArray && (ua.ver = parseInt(ua.verArray[2], 10))),
241  ua.isiOS && (ua.verArray = /(os)\s([0-9]{1,})([\_0-9]{1,})/.exec(ua.name), ua.verArray && (ua.ver = parseInt(ua.verArray[2], 10))),
242  ua.isAndroid && (ua.verArray = /(android)\s([0-9]{1,})([\.0-9]{1,})/.exec(ua.name), ua.verArray && (ua.ver = parseInt(ua.verArray[2], 10))),
243  ua.isMacSafari = (!ua.isiOS && !ua.isAndroid) && (ua.name.indexOf("safari") !== -1 && ua.name.indexOf("chrome") === -1);
244
245var ieVer;
246if (ua.isIE) {
247  ieVer = parseInt(ua.name.match(/((msie|MSIE)\s|rv:)([\d\.]+)/)[3], 10);
248}
249
250var browser = {};
251if (ua.name.indexOf('trident/7') != -1) {
252  browser.isIE11 = true;
253} else if (ua.name.indexOf('chrome') != -1) {
254  browser.isChrome = true;
255} else if (ua.name.indexOf('crios') != -1) {
256  browser.isChrome = true;
257} else if (ua.name.indexOf('fxios') != -1) {
258  browser.isFirefox = true;
259} else if (ua.name.indexOf('safari') != -1) {
260  browser.isSafari = true;
261} else if (ua.name.indexOf('firefox') != -1) {
262  browser.isFirefox = true;
263}