https://www.taisei-yuraku.co.jp/js/index.js

1//////////////////////////////////////////////////
2//	INDEX.JS
3//////////////////////////////////////////////////
4
5//////////// movie ////////////////////////////////////////////
6var tag = document.createElement('script');
7tag.src = "https://www.youtube.com/player_api";
8var firstScriptTag = document.getElementsByTagName('script')[0];
9firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
10
11var ytPlayer;
12function onYouTubePlayerAPIReady() {
13	ytPlayer = new YT.Player(
14		'movieArea',
15		{
16			width: '100%',
17			height: '100%',
18			videoId: 'j_MaOdKbYBw',
19
20			events: {
21				'onReady': onPlayerReady,
22				'onStateChange': onPlayerStateChange
23			},
24
25			playerVars: {
26				autoplay: 1,
27				controls: 0,
28				loop: 1,
29				rel: 0,
30				showinfo: 0,
31				wmode: 'transparent',
32			}
33		}
34	);
35}
36
37var playerReady = false;
38
39function onPlayerReady(event) {
40	playerReady = true;
41	event.target.mute();
42
43	setInterval(function(){
44		var currentTime = ytPlayer.getCurrentTime();
45		if (currentTime > 29) {
46			setTimeout(function(){
47				ytPlayer.seekTo(currentTime - 29);
48			},800);
49		}
50	},100);
51
52}
53
54function onPlayerStateChange(event) {
55	var ytStatus = event.data;
56}
57
58
59$(function(){
60
61	var w = $(window).width();
62
63//////////// loading ////////////////////////////////////////////
64	Pace.on('done', function(){
65		$('.loaderBg').delay(300).fadeOut(800);
66	});
67
68//////////// moviePreLoad ////////////////////////////////////////////
69	if(navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('iPad') > 0 || navigator.userAgent.indexOf('Android') > 0){
70		$('.movieSide').addClass('noMovie').prepend('<div class="textureLayer"></div>');
71	} else {
72		$('.movieSide').prepend('<div class="textureLayer"></div><div id="video"><div id="movieArea"></div></div>');
73
74		var movieRatio = 16/9;
75
76		function movieAdjust(){
77			var adjustWidth = $('.movieSide').width();
78			var adjustHeight = $(window).height() - 60;
79			if (adjustHeight > adjustWidth / movieRatio) {
80				adjustWidth = adjustHeight * movieRatio;
81			}
82			$('iframe').css({width:(adjustWidth),height:(adjustWidth/movieRatio)});
83
84			var ifW = $('iframe').width(),
85			ifH = $('iframe').height(),
86			winW = $('#wrapper').width() / 2,
87			winH = $(window).height() - 60;
88
89			$('iframe').css({marginTop: '-' + ((ifH - winH) / 2) + 'px',marginLeft: '-' + ((ifW - winW) / 2) + 'px'});
90		}
91
92		$(window).on('load resize', function(){
93			movieAdjust();
94		});
95
96	}
97
98	$(window).on('load resize',function(){
99//////////// matchHeight.js ////////////////////////////////////////////
100		$('.slick-slide dl, .projectNav > ul > li, .subjectNav .menuList').matchHeight();
101
102//////////// subjectNav ////////////////////////////////////////////
103		var subjectBtnW = $('.subjectBtn').width();
104
105		if( w > 768 ){
106			$('.subjectBtn').css('height', subjectBtnW);
107			$('.menuWrap').removeAttr('style');
108		}
109	});
110
111	$('.subjectBtn').on('click',function(){
112		$(this).closest('li').toggleClass('active');
113		$(this).closest('li').siblings('li').removeClass('active');
114	});
115
116	$(window).on('resize',function(){
117		$('.subjectBtn').closest('li').removeClass('active');
118	});
119
120	$('.subjectBtn').append('<div class="toggleBtn"></div>');
121	$('.subjectBtn .toggleBtn').click(function(){
122		$(this).closest('.subjectBtn').toggleClass('switch');
123		$(this).closest('.subjectBtn').siblings('.menuWrap').slideToggle('normal');
124	});
125
126	$(window).on('load resize',function(){
127		setTimeout(function(){
128			var sbH = $('.subjectBtn').height();
129			$('.listHead, .listHead img').css({height:sbH});
130		},100);
131	});
132
133//////////// projectNv ////////////////////////////////////////////
134	$('.projectNav > ul > li').click(function(){
135		$(this).closest('li').toggleClass('clickActive');
136	});
137
138	$('.projectNav > ul > li').hover(function(){
139		$(this).toggleClass('hoverActive');
140	});
141
142});