https://www.jun.co.jp/assets/js/top.js?153

1$(function() {
2	var topimgArray = [];
3	var brandimgArray = [];
4	var topSlideID = 0;
5	var kerningData;
6	var zindex = 0;
7	var topSlideLeng;
8	var fffY;
9	var scrollFlg = true;
10	function setTopSize() {}
11	setTopSize.prototype.top = function() {
12		var winW = $(window).width();
13		var winH = $(window).outerHeight();
14		var headerH = 78;
15		var margin = 100;
16		var newsH = $('.news__slick').height();
17		if( winW <= 895) {
18			margin = 0;
19		}
20		//$('.main').css({ height : winH * 2 - headerH + newsH});
21		$('.fff').css({ height : winH});
22		fffY = winH;
23		if(winW < 895) {
24			//$('.main').css({ height : winH + 424});
25			$('.main .hero').css({ height : 'calc(100% - 85px)'});
26		} else {
27			if(winH <= 688) {
28				$('.main .hero').css({ height : 688 - 78 - margin});
29				//$('.fff').css({ top : 688 - margin});
30			} else {
31				$('.main .hero').css({ height : window.innerHeight - margin});
32			}
33			//$('.main').css({ height : winH * 2 - headerH});
34		}
35		//file change
36		$(".main .hero .hero--img li").each(function(i) {
37			var imgSrc = $(".main .hero .hero--img li:eq("+ i +") span");
38			var file = imgSrc.css("background-image");
39			if(winW < 895) {
40				file = file.replace("--pc", "--sp");
41			} else {
42				file = file.replace("--sp", "--pc");
43			}
44			imgSrc.css({'background-image': file});
45		});
46		if( winW <= 895) {
47			$('.main .hero .hero--img').css({height : winH - 222});
48		} else {
49			$('.main .hero .hero--img').css({height : 'calc(100% - 78px)'});
50		}
51		
52	}
53	var resize = new setTopSize();
54	$(window).resize(function() {
55		resize.top();
56	});
57	resize.top();
58	var timer;
59	var autoSlide;
60	$('.column.column--list li').matchHeight();
61	function autoSlideDo() {
62		timer = setInterval(topSlide,7000);
63	}
64
65	/*$(window).focus();
66	$(window).bind("focus",function(){
67		clearInterval(timer);
68		autoSlideDo();
69	}).bind("blur",function(){
70		clearInterval(timer);
71	});
72	clearInterval(timer);*/
73	//hero
74	$.getJSON("/json/kerning-data.json" , function(_data) {
75		kerningData = _data;
76	 // $('.main .hero .hero--copy').kerning({data:_data}, true);
77	});
78	//hero json
79	$.getJSON("/json/top.json", getFunc);
80	function getFunc(myData){
81		var length = myData.topList.length;
82		for (var i=0 ; i < length ; i++){
83			topimgArray[i] = new Array();
84			topimgArray[i][0] = myData.topList[i].title;
85			topimgArray[i][1] = myData.topList[i].thum;
86			topimgArray[i][2] = myData.topList[i].logo;
87			topimgArray[i][3] = myData.topList[i].url;
88			if(topimgArray[i][3] === '' | topimgArray[i][3] === 'undefined') {
89				$('.main .hero .hero--img').append('<li><span style="background-image: url('+ topimgArray[i][1] +')"></span><div class="hero--img--logo" style="background-image: url('+ topimgArray[i][2] +')"></div></li>');
90			} else {
91				$('.main .hero .hero--img').append('<li><a href="'+ topimgArray[i][3] +'" target="_blank"><span style="background-image: url('+ topimgArray[i][1] +')"></span><div class="hero--img--logo" style="background-image: url('+ topimgArray[i][2] +')"></div></a></li>');
92			}
93			
94		}
95		resize.top();
96		$('.main .hero .hero--img').imagesLoaded( { background: true }, function() {
97			TweenMax.fromTo('.loader', 1, { opacity: 1}, { delay: .5, opacity: 0, ease: Power2.easeInOut,onComplete: function(){
98				$('.loader').remove();
99
100			}});
101			topSlideLeng = $('.main .hero .hero--img li').length;
102			TweenMax.fromTo('.main .hero .hero--credit dl dt', .8, { width : '0%' }, { delay:1, width : '100%', ease: Power2.easeInOut});
103			TweenMax.fromTo('.main .hero .hero--credit dl dd', 1.4, { width : '0%' }, { delay:1.5, width : '100%', ease: Power2.easeInOut,onComplete: function(){
104				topTextSlide();
105				topImgSlide();
106				autoSlideDo();
107				setTimeout(function() {
108					scrollAnime();
109				},1500);
110			}});
111		});
112
113	}
114	//fff json
115	$.getJSON("/brand/brand.json", getFuncBrand);
116	function getFuncBrand(myData){
117		var length = myData.brandList.length;
118		var shuffle = function() {return Math.random()-.5};
119		for (var i=0 ; i < length ; i++){
120			if(myData.brandList[i].id == 'NULL') continue;
121			brandimgArray[i] = new Array();
122			brandimgArray[i][0] = myData.brandList[i].name;
123			brandimgArray[i][1] = myData.brandList[i].thum;
124			brandimgArray[i][2] = myData.brandList[i].url;
125		}
126		brandimgArray.sort(shuffle);
127		for (var n=0 ; n < 5 ; n++){
128			for (var i=0 ; i < 7 ; i++){
129				var $elm = $('.main .fff .fff--slide ul:eq('+ n +')');
130				$elm.append('<li><span style="background-image: url('+ brandimgArray[i + 7 * n][1] +')"></span><a href="'+ brandimgArray[i + 7 * n][2] +'">'+ brandimgArray[i + 7 * n][0] +'</a></li>');
131			}
132		}
133		//fff
134		var brandTime = 50;
135		if(window.innerWidth <= 894) brandTime = 25;
136		setTimeout(function() {
137			$('.main .fff .fff--slide li span').imagesLoaded( { background: true }, function() {
138				$(".main .fff .fff--slide ul").each(function(n){
139					var innerH = $(this).height();
140					$(".main .fff .fff--slide ul:eq("+ n +") li").clone().prependTo($(this));
141					var innerStartY = 0;
142					var innerEndY = -innerH;
143					if(n%2) {
144						innerStartY = -innerH;
145						innerEndY = 0;
146					}
147					console.log(innerStartY);
148					TweenMax.fromTo($(this), brandTime, { y: innerStartY}, { repeat: -1, y: innerEndY, ease: Power0.easeNone,onComplete: function(){
149
150					}});
151				});
152
153				scrollFlg = false;

154			});
155		},500);
156	}
157
158	//slide
159	function topSlide(){
160		if(topSlideID >= topSlideLeng - 1) {
161			topSlideID = 0;
162		} else {
163			topSlideID++;
164		}
165		topTextSlide();
166		topImgSlide();
167	}
168	function topImgSlide(){
169		var $elm = $('.main .hero .hero--img li').eq(topSlideID);
170		zindex++;
171		$elm.show().css({'z-index' : zindex});
172		TweenMax.fromTo($elm, 2, { opacity: 0}, { opacity: 1, ease: Power2.easeInOut,onComplete: function(){
173
174		}});
175		var $elm2 = $('.main .hero .hero--img li:eq('+ topSlideID +') span');
176		TweenMax.fromTo($elm2, 7.6, { x: 0}, { x: -50, ease: Power0.easeNone,onComplete: function(){
177
178		}});
179	}
180	function topTextSlide(){
181		$('.main .hero').append('<div class="hero--copy"></div>');
182		var $elm = $('.main .hero .hero--copy').eq(1);
183		$elm.html(topimgArray[topSlideID][0]);
184		$elm.children().andSelf().contents().each(function(n) {
185			$(this).replaceWith($(this).text().replace(/(\S)/g, '<strong>$1</strong>'));
186			var str = $elm.html();
187			str = str.replace( /Â¥/g, '<br>');
188			$elm.html(str);
189			$elm.kerning({data:kerningData}, true);
190			var hexagon = $('.main .hero .hero--copy:eq(1) strong').toArray();
191			TweenMax.set(hexagon, {autoAlpha: 0});
192			hexagon.sort(function(){return 0.5-Math.random()});
193
194			TweenMax.staggerTo(hexagon, 0.7, {delay:2, autoAlpha: 1, ease: Quad.easeInOut}, 0.04);
195		});
196
197		var $elm2 = $('.main .hero .hero--copy').eq(0);
198		$elm2.children().andSelf().contents().each(function() {
199			var hexagon2 = $('.main .hero .hero--copy:eq(0) strong').toArray();
200			TweenMax.staggerTo(hexagon2, 0.5, {autoAlpha: 0, ease: Quad.easeInOut}, 0.04);
201			setTimeout( function() {
202				$elm2.remove();
203			},2500);
204		});
205	}
206	function endText(){
207		var $elm = $('.main .hero .hero--copy').eq(0);
208	}
209
210
211	$('.main .fff .fff--nav ul li').on({
212		'mouseenter':function(){
213			var index = $('.main .fff .fff--nav ul li').index(this);
214			TweenMax.to('.main .fff .fff--nav ul li', .4, { opacity: .3, ease: Power2.easeInOut});
215			TweenMax.to('.main .fff .fff--nav ul li:eq('+ index +')', .4, { opacity: 1, ease: Power2.easeInOut});
216		},
217		'mouseleave':function(){
218			TweenMax.to('.main .fff .fff--nav ul li', .4, { opacity: 1, ease: Power2.easeInOut});
219		}
220	});
221	function scrollAnime(){
222		var hexagon = $('.main .fff--slide li').toArray();
223	    TweenMax.set(hexagon, {autoAlpha: 0});
224	    hexagon.sort(function(){return 0.5-Math.random()});
225	    TweenMax.staggerTo(hexagon, 0.3, {autoAlpha: 1, ease: Quad.easeInOut}, 0.02);
226
227		var hexagon2 = $('.fff .fff--nav ul li span').toArray();
228	    TweenMax.set(hexagon2, {autoAlpha: 0});
229	    hexagon2.sort(function(){return 0.5-Math.random()});
230	    TweenMax.staggerTo(hexagon2, 0.3, {autoAlpha: 1, ease: Quad.easeInOut}, 0.05);
231
232		TweenMax.staggerTo('.main .fff .fff--nav h2 span', .7, {autoAlpha: 1, ease: Quad.easeInOut}, 0.1);
233	}
234
235	$(window).scroll(function () {
236		var scrollY = $(this).scrollTop();
237		if (scrollY > fffY && !scrollFlg ) {
238			if(!$('.main .fff').hasClass('active')) {
239				//scrollAnime();
240			}
241			$('.main .fff').addClass('active');
242		}
243		 TweenMax.set('.main .hero .hero--img', { y: -scrollY / 2 });
244	 });
245	//重要なお知らせ
246	$.getJSON("/notices/notice.json?v=" + Math.random(), getFuncNotice);
247	function getFuncNotice(myData){
248		var length = 1;
249		for (var i=0 ; i < length ; i++){
250			$('.bread__club ul li dl').append('<dt>'+ myData.newsList[i].date +'</dt><dd><a href="'+ myData.newsList[i].url +'">'+ myData.newsList[i].name +'</a></dd>');
251		}
252	}
253	
254	//Related
255	$.getJSON("/news/related.json?v=" + Math.random(), getFuncRelated);
256	function getFuncRelated(myData){
257		var length = myData.newsList.length;
258		for (var i=0 ; i < length ; i++){
259			if(myData.newsList[i].related === "1") {
260				var hashLeng = myData.newsList[i].hashList.length,
261					elm = '';
262					for(var n = 0; n < hashLeng; n++) {
263						elm += '<dd><a href="'+ myData.newsList[i].hashList[n].url +'">'+ myData.newsList[i].hashList[n].name +'</a></dd>';
264					}
265
266				$('.news__slick--contents').append('<div class="news__slick--contents--list"><dl><dt><a href="'+ myData.newsList[i].url +'"><span style="background-image: url('+ myData.newsList[i].img +')"></span></a></dt><dd> <dl><dt><a href="'+ myData.newsList[i].url +'">'+ myData.newsList[i].title +'</a></dt><dd><dl class="list__bottom--nav clearfix"><dt>'+ myData.newsList[i].date +'</dt>'+ elm +'</dl></dd></dl></dd></dl></div>');
267			}
268			
269		}
270		

271		//slick js
272		resize.top();
273		var $slider = $('.news__slick--contents').slick({
274		  infinite: true,
275		  dots:false,
276		  slidesToShow: 3,
277		  centerMode: true, //要素を中央寄せ
278		  centerPadding:'0', //両サイドの見えている部分のサイズ
279		  autoplay:false, //自動再生
280		  responsive: [{
281			   breakpoint: 768,
282					settings: {
283						centerPadding:'45px',
284						slidesToShow: 1,
285			   }
286		  }]
287		});
288	}
289	
290	
291});