https://darwinsincident.net/assets/js/jquery.top.js

1/*-----------------------------------------------
2 * Scroll Navigaiton [現在地の項目をナビゲーションにカレントするやつ]
3-------------------------------------------------*/
4const NAV_ACTIVE_CLASSNAME = 'is-active';
5const navlists = document.querySelectorAll('.js-navlink');
6const nav_option = {
7	threshold: 0,
8	rootMargin: '-50% 0px',
9}
10
11navlists.forEach(navlist =>{
12	const nav_target = document.querySelector(navlist.getAttribute('data-nav'));
13	const nav_observer = new IntersectionObserver(([{isIntersecting}]) => {
14		if (isIntersecting) {
15			navlists.forEach(el => el.classList.remove(NAV_ACTIVE_CLASSNAME));
16			navlist.classList.add(NAV_ACTIVE_CLASSNAME);
17		}
18	},nav_option);
19	nav_observer.observe(nav_target);
20})
21
22// 黒から白にチェンジ
23$(function(){
24	var H_scroll;
25	var objTop = $('#onair').offset().top;
26
27	$(window).on('scroll', function(){
28		H_scroll = $(window).scrollTop();
29
30		if(H_scroll >= objTop){
31			$("body").addClass("is-w");
32		}else {
33			$("body").removeClass("is-w");
34		}
35	});
36});
37
38$(document).ready(function() {
39	if ($(window).width() <= 768) {
40		var O_scroll;
41		var objTop = $('#onair').offset().top;
42
43		$(window).on('scroll', function(){
44			O_scroll = $(window).scrollTop();
45
46			if(O_scroll >= objTop){
47				$("body").addClass("is-o");
48			}else {
49				$("body").removeClass("is-o");
50			}
51		});
52	}
53 });
54 $(function () {
55	// スクロールを開始したら
56	if ($(window).width() <= 768) {
57		$(window).on("scroll", function () {
58		onairHeight = $("#onair").height();
59		if ($(window).scrollTop() > onairHeight) {
60			$("body").addClass("is-o");
61		} else {
62			$("body").removeClass("is-o");
63		}
64		});
65	}
66});
67/*-----------------------------------------------
68 * YouTube API
69-------------------------------------------------*/
70var tag = document.createElement('script');
71
72tag.src = "https://www.youtube.com/iframe_api";
73var firstScriptTag = document.getElementsByTagName('script')[0];
74firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
75var player;
76
77var ytID = ['P2OQyntzpho'];
78var ytNow = 0;
79var ytSize = 'large';
80
81function onYouTubeIframeAPIReady() {
82	player = new YT.Player('js-yt-autoplay', {
83		height: '100%',
84		width: '100%',
85		videoId: ytID[0],
86		events: {
87			'onReady': onPlayerReady,
88			'onStateChange': onPlayerStateChange,
89			'onError': onPlayerError
90		},
91		playerVars: {
92			rel: 0,
93			controls: 0,
94			disablekb: 1,
95			fs: 0,
96			iv_load_policy: 3,
97			showinfo: 0,
98			modestbranding: 1,
99			playsinline: 1,
100		}
101	});
102}
103function onPlayerReady(event) {
104	event.target.mute();
105	event.target.playVideo();
106}
107function onPlayerStateChange(event) {
108	if (event.data == YT.PlayerState.ENDED) {
109		ytNow++;
110		if (ytNow >= ytID.length) {
111			ytNow = 0;
112		}
113		if (ytNow < 0) {
114			ytNow = ytID.length - 1;
115		}
116		player.clearVideo();
117		player.loadVideoById(ytID[ytNow], 0, ytSize);
118		player.playVideo();
119	}
120}
121function stopVideo() {
122	player.stopVideo();
123}
124function onPlayerError(event) {
125	//console.log(event);
126}
127
128// YouTube Iframe 二重再生防止 [movie1つのみ]
129$(".js-youtubePlay").on('click', function () {
130	player.stopVideo();
131	$(".js-modalBox").addClass('js-modalplayClose');
132});
133$(document).on('click', '.js-modalplayClose a.js-modalClose', function () {
134	player.playVideo();
135	$(".modalBox").removeClass('js-modalplayClose');
136});
137$(document).on('click', '.js-modalplayClose .js-oneModalIn', function (e) {
138	player.playVideo();
139	$(".modalBox").removeClass('js-modalplayClose');
140});
141/**
142 * アスペクト比
143 */
144var $aspectWrap = $('.js-aspectWrap');
145var aspect = 16 / 9;
146
147function iframeSize() {
148	$aspectWrap.each(function () {
149		var $aspect = $(this).find('.js-aspect');
150		var videoWrapWidth = window.innerWidth;
151		var videoWrapHeight = window.innerHeight;
152		var videoAspectWrap = videoWrapWidth / videoWrapHeight;
153		// console.log(videoWrapWidth, videoWrapHeight);
154
155		if (aspect <= videoAspectWrap) {
156			$aspect.css({
157				'width': videoWrapWidth + 'px',
158				'height': videoWrapWidth / aspect + 'px'
159			});
160		} else {
161			$aspect.css({
162				'width': videoWrapHeight * aspect + 'px',
163				'height': videoWrapHeight + 'px'
164			});
165		}
166	});
167}
168
169// リサイズ処理
170$(window).on('load resize', function () {
171	iframeSize();
172});
173
174function movie(_ytid) {
175	$('#youtubeModal').fadeIn(500);
176	$('.modalBox').fadeIn(500);
177	var ytURL = 'https://www.youtube.com/embed/' + _ytid + '?autoplay=1&rel=0';
178	setTimeout(function () {
179		$('.js-youtubeIframe').attr('src', ytURL);
180	}, 100);
181	$('body').css({ 'overflow': 'hidden' });
182}
183
184/*-----------------------------------------------
185 * character 一覧
186-------------------------------------------------*/
187const charaSlideLength = document.querySelectorAll('#js-charaSwiper .chara__contItem').length
188

189if (charaSlideLength > 2) {
190var characterSwiper = new Swiper('#js-charaSwiper', {
191	slidesPerView: 'auto',
192	// initialSlide: 3, // キャラ数
193	// centeredSlides: true,
194	speed: 3000,
195	slideToClickedSlide: true,
196	navigation: {
197		nextEl: `.js-charaSwiper__next`,
198		prevEl: `.js-charaSwiper__prev`,
199	}
200});
201}
202// characterSwiper.slideTo(0);
203
204$(".chara__contItem a").on({
205	"mouseenter": function () {
206	  // console.log("mouseenter");
207	  $("body").addClass("is-hover");
208	},
209	"mouseleave": function () {
210	  $("body").removeClass("is-hover");
211	}
212  });
213
214/*-----------------------------------------------
215 * character Modal
216-------------------------------------------------*/
217function charaModal(cid) {
218	var chara_url = './_character/' + cid + '.html';
219	$('.charaModalCont').load(chara_url, function () {
220		$('#charaModal').fadeIn(500);
221		$(".modalBox").fadeIn(500);
222		$("body").css({ 'overflow': 'hidden' });
223	});
224}
225$('#charaModal .js-modalClose').on('click touchend', function (e) {
226	$(".modalBox").animate({'scrollTop':0},10);
227	$('.modalBox, .oneModal').fadeOut(500);
228	$('body').css({ 'overflow': '' });
229});
230
231/*-----------------------------------------------
232 * special Modal
233-------------------------------------------------*/
234function special(_img) {
235	$(".js-specialModalCont_img").attr("src", _img);
236	$('#specialModal').fadeIn(500);
237	$('.modalBox').fadeIn(500);
238	$('body').css({ 'overflow': 'hidden' });
239}
240$('.js-specialModalCont').on('click touchend', function (e) {
241	$('.modalBox, .oneModal').fadeOut(500);
242	$('body').css({ 'overflow': '' });
243});
244
245/*-----------------------------------------------
246 * comment Modal
247-------------------------------------------------*/
248function commentModal(cid) {
249	var comment_url = './_comment/' + cid + '.html';
250	$('.commentModalCont').load(comment_url, function () {
251		$('#commentModal').fadeIn(500);
252		$(".modalBox").fadeIn(500);
253		$("body").css({ 'overflow': 'hidden' });
254	});
255}
256$('#commentModal .js-modalClose').on('click touchend', function (e) {
257	$(".modalBox").animate({'scrollTop':0},10);
258	$('.modalBox, .oneModal').fadeOut(500);
259	$('body').css({ 'overflow': '' });
260});
261/*-----------------------------------------------
262 * Loading
263-------------------------------------------------*/
264var hs = location.hash,
265skiped = hs === '#skip'; //loading,スクロールアニメーションのスキップ
266var $loading = $('.js-loading');
267var  firstYtID = ['P2OQyntzpho'];
268var first_logo = document.getElementById('js-firstLogo');
269var next_logo = document.getElementById('js-nextLogo');
270// スクロールを禁止にする関数
271function disableScroll(event) {
272	event.preventDefault();
273}
274document.addEventListener('touchmove', disableScroll, { passive: false });
275document.addEventListener("mousewheel", disableScroll, { passive: false });
276
277//スクロール禁止解除
278function scrollok(){
279	document.removeEventListener('touchmove', disableScroll, { passive: false });
280	document.removeEventListener("mousewheel", disableScroll, { passive: false });
281}
282
283// hash(#skip)
284if(skiped){
285	$(function(){
286		$loading.remove();
287		$('.js-fani').addClass('is-ani');
288		scrollok();
289	});
290// hash(#skip)以外
291} else if(!(skiped) && $(hs)[0]){
292	var contTarget;
293		$(function(){
294			$('body,html').animate({scrollTop:0}, 10);
295			$('.js-fani').addClass('is-ani');
296		});
297		$(window).on('load', function(){
298			wh = $(window).innerHeight();
299			headerHeight = $('.js-header').innerHeight();
300
301			if(hs === '#top') {
302				contTarget = topPos; //hsが無い時の位置
303			} else {
304				contTarget = $(hs).offset().top - headerHeight; //#hashセクションの位置
305			}
306			$loading.addClass('is-ani');
307			$('body,html').animate({scrollTop:contTarget}, 100, 'easeOutQuart');
308			$loading.delay(2800).fadeOut(500);
309			$("body").css({'overflow':''});
310			setTimeout(() => {
311				scrollok();
312			}, 3600);
313		});
314
315// hash none
316} else {
317	
318	//初回訪問時の処理
319	if (!sessionStorage.getItem('visited')) {
320		$(window).on('load', function(){
321			$loading.addClass('is-ani');
322			$('body,html').animate({scrollTop:0}, 10);
323			movie(firstYtID);
324			$loading.delay(2800).fadeOut(500);
325			$("body").css({'overflow':''});
326			setTimeout(() => {
327				firstAnimation();
328				scrollok();
329			}, 3600);
330		});
331
332		// 訪問済みフラグをセット
333		sessionStorage.setItem('visited', 'true');
334
335	// 2回目以降
336	} else {
337		$(window).on('load', function(){
338			$loading.addClass('is-ani');
339			$('body,html').animate({scrollTop:0}, 10);
340			$loading.delay(2800).fadeOut(500);
341			$("body").css({'overflow':''});
342			setTimeout(() => {
343				firstAnimation();
344				scrollok();
345			}, 3600);
346		});
347	}
348}
349function firstAnimation() {
350	$('.js-fani').addClass('is-ani');
351}
352