https://alpinion.com/js/user/main.js?ver=240507

1/* *******************************************************
2 * filename : main.js
3 * description : 메인에만 사용되는 JS
4 * date : 2020-02-24
5******************************************************** */
6
7
8jQuery(function($){
9	//alert();
10	/* *********************** 메인 비주얼 ************************ */
11	// 메인 비주얼 높이값 설정
12	if ($.exists('.full-height')) {
13		mainVisualHeight();
14		$(window).on('resize', mainVisualHeight);
15
16		function mainVisualHeight () {
17			var visual_height = getWindowHeight();//	- $("#header").height();	// header가 fixed or absolute일경우 - $("#header").height() 삭제
18			$("#mainVisual").height(visual_height);
19			//$("#mainVideoCon").height(visual_height);
20		}
21	}
22	
23	
24	
25	
26	/*-----
27	Spanizer
28	- Wraps letters with spans, for css animations
29	-----*/
30	(function($) {
31	  var s,
32	  spanizeLetters = {
33		settings: {
34		  letters: $('.js-spanize'),
35		},
36		init: function() {
37		  s = this.settings;
38		  this.bindEvents();
39		},
40		bindEvents: function(){
41		  s.letters.html(function (i, el) {
42			//spanizeLetters.joinChars();
43			var spanizer = $.trim(el).split("");
44			return '<span>' + spanizer.join('</span><span>') + '</span>';
45		  });
46		},
47	  };
48	  spanizeLetters.init();
49	})(jQuery);
50	if (detectBrowser() != "ie") {
51		$(".glow-text-wrapper").each(function  () {
52			$(this).find("span").each(function  (idx) {
53				$(this).css({
54					"-webkit-transition-delay": (0.05*idx)+"s",
55					"transition-delay": (0.05*idx)+"s",
56				});
57			});
58		});
59	}
60	
61
62	/* *********************** 메인 갤러리 슬라이드 ************************ */
63	$('.main-news-con').each(function  () {
64		var $mainNewsSlide = $(this).find('.main-board-slide');
65		var $mainTitBox = $(this).find('.main-tit-box');
66
67		if ($('.col-3-1')) {
68			$mainNewsSlide.slick({
69				slidesToShow: 3,
70				slidesToScroll: 1,
71				arrows: true,
72				fade: false,
73				dots:false,
74				autoplay: false,
75				speed:800,
76				infinite:false,
77				autoplaySpeed: 3000,
78				easing: 'easeInOutQuint',
79				pauseOnHover:false,
80				prevArrow: '<button type="button" data-role="none" class="slick-prev end" aria-label="Prev" tabindex="0" role="button"><i class="xi-angle-left-min"></i></button>',
81				nextArrow: '<button type="button" data-role="none" class="slick-next" aria-label="Next" tabindex="0" role="button"><i class="xi-angle-right-min"></i></button>',
82				appendArrows:$mainTitBox,
83				responsive: [
84							{
85							  breakpoint: 1025,
86							  settings: {
87								slidesToShow: 1,
88								slidesToScroll: 1,
89							  }
90							},
91						  ]
92			});
93		}else {
94			$mainNewsSlide.slick({
95				slidesToShow: 2,
96				slidesToScroll: 1,
97				arrows: true,
98				fade: false,
99				dots:false,
100				autoplay: false,
101				speed:800,
102				infinite:true,
103				autoplaySpeed: 3000,
104				easing: 'easeInOutQuint',
105				pauseOnHover:false,
106				prevArrow: '<button type="button" data-role="none" class="slick-prev end" aria-label="Prev" tabindex="0" role="button"><i class="xi-angle-left-min"></i></button>',
107				nextArrow: '<button type="button" data-role="none" class="slick-next" aria-label="Next" tabindex="0" role="button"><i class="xi-angle-right-min"></i></button>',
108				appendArrows:$mainTitBox,
109				responsive: [
110							{
111							  breakpoint: 801,
112							  settings: {
113								slidesToShow: 2,
114								slidesToScroll: 1
115							  }
116							},
117						  ]
118			});
119		}
120	})
121	
122	$('.main-event-con').each(function  () {
123		var $mainEventSlide = $(this).find('.main-board-slide');
124		var $mainTitBox = $(this).find('.main-tit-box');
125
126		$mainEventSlide.slick({
127			slidesToShow: 1,
128			slidesToScroll: 1,
129			arrows: true,
130			fade: false,
131			dots:false,
132			autoplay: false,
133			speed:800,
134			infinite:false,
135			autoplaySpeed: 3000,
136			easing: 'easeInOutQuint',
137			pauseOnHover:false,
138			prevArrow: '<button type="button" data-role="none" class="slick-prev end" aria-label="Prev" tabindex="0" role="button"><i class="xi-angle-left-min"></i></button>',
139			nextArrow: '<button type="button" data-role="none" class="slick-next" aria-label="Next" tabindex="0" role="button"><i class="xi-angle-right-min"></i></button>',
140			appendArrows:$mainTitBox,
141			responsive: [
142						{
143							  breakpoint: 1025,
144							  settings: {
145								slidesToShow: 1,
146								slidesToScroll: 1,
147							  }
148							},
149					  ]
150		});
151
152	})
153
154	
155
156	/* *********************** 지도 카운팅 ************************ */
157	function numberCounter(target_frame, target_number) {
158		this.count = 0; this.diff = 0;
159		this.target_count = parseInt(target_number);
160		this.target_frame = document.getElementById(target_frame);
161		this.timer = null;
162		this.counter();
163	};
164
165	numberCounter.prototype.counter = function() {
166		var self = this;
167		this.diff = this.target_count - this.count;
168		
169		if(this.diff > 0) {
170			self.count += Math.ceil(this.diff / 10);
171			
172		}
173		 
174		this.target_frame.innerHTML = this.count.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
175		
176		//한자리숫자 앞에 0넣기
177		if (this.target_count < 10) {
178			this.target_frame.innerHTML = '0'+this.count.toString();
179		}
180
181		if(this.count < this.target_count) {
182			this.timer = setTimeout(function() { self.counter(); }, 30);
183		} else {
184			clearTimeout(this.timer);
185		}
186	};
187	function callCount(target, number) {
188		return new numberCounter(target, number);
189		
190	}
191
192	function scrollEvent() {
193      var scrollHeight = $(window).scrollTop();
194	  var countStart =  $("#mainMapCon").offset().top;
195      if ( scrollHeight > countStart - 300){
196          $('.global-counting-list li').each(function() {
197				var number = $(this).find(".num").data("number");
198				var targetIndex = $(this).index()+1;
199				setTimeout(function  () {
200					callCount('counter' + targetIndex , number);
201				},200);

202			});
203          window.removeEventListener("scroll", scrollEvent);
204      }
205    }
206    window.addEventListener("scroll", scrollEvent);
207
208});
209
210
211$(window).on('load',function  (e) {
212	/* *********************** 메인비주얼 ************************ */
213	// 메인 비주얼 슬라이드
214	$(".main-visual-slide-JS").each(function(){
215		var $visualWrapper = $(this);
216		var $visualList = $visualWrapper.find(".visual-item");
217		var $txtList = $visualWrapper.find(".visual-txt-item");
218		var $bulletList = $visualWrapper.find(".main-dots > li");
219		var $btnList = $visualWrapper.find(".arrow-dots-box");
220		var visualLength = $visualList.length
221		var visualIndex = 0;
222		var visualSpeed = 5000;
223		var isClick = 0;
224		var visualState = false;
225		
226		setTimeout(function(){
227			$txtList.eq(0).addClass('active');
228		},300);
229
230		/* Prev Visual Effect */ 
231		visualImageWidth();
232		function visualImageWidth () {
233			$visualList.find(".visual-img").css('width',$(this).outerWidth());
234		}
235		$(window).on('resize', visualImageWidth);
236
237		/* After Slide And Next Active */ 
238		function slideChangeAction (visualIndex) {
239			setTimeout(function(){
240				$visualList.removeClass("active").removeAttr("style");
241				$visualList.eq(0).removeClass("first");	
242				//$visualList.eq(visualIndex + 1).css("z-index","1").removeClass("active");
243				$visualList.eq(visualIndex).addClass("active").css("z-index","10").removeClass("next-active");
244				setTimeout(function(){
245						isClick = 0;	
246				},20);  	
247			},2000);
248				if ($visualList.eq(visualIndex).hasClass('black')){
249					$btnList.addClass('black');
250				}else{
251					$btnList.removeClass('black');
252				}
253				if ($visualList.eq(visualIndex).hasClass('m-white')){
254					$btnList.addClass('m-white');
255				}else{
256					$btnList.removeClass('m-white');
257				}
258		}
259		
260		/* After Slide And Reset Prev Active Image */ 
261		function resetVisual () {
262			$visualList.eq(visualIndex).find(".visual-inner").animate({
263				 width:"0%"
264			},2000,"easeOutExpo");
265			$txtList.eq(visualIndex).find(".main-visual-txt-con").css("animation","fadeOutLeft 0.8s both");
266			setTimeout(function  () {
267				$(".visual-item.active").find(".visual-img").css("transform","translateX(0%)");
268			},1900);
269			$visualList.eq(visualIndex).find(".overlay").delay(0.5).fadeIn();
270			$txtList.removeClass("active");
271			$bulletList.removeClass("active");
272		}
273
274		/* Visual Index Check */ 
275		function visualNextCheck (visualIndex, check) {
276			resetVisual();
277
278			switch (check) {
279			case 'prev':
280				if(visualIndex >= 0 ){
281					visualIndex = (visualIndex === 0) ? visualLength - 1 :  visualIndex - 1;
282				}
283				break;
284			case 'bullet':
285				visualIndex = visualIndex+1;
286				break;
287			default:
288				visualIndex =  (visualIndex >= ( visualLength - 1)) ? visualIndex = 0 : visualIndex += 1;

289			}
290
291			activeAndNextActive(visualIndex);
292
293			return visualIndex;
294		}
295
296		/* Visual Active */ 
297		function activeAndNextActive (visualIndex) {
298			$visualList.eq(visualIndex).addClass("next-active");
299			$visualList.eq(visualIndex).find(".visual-inner").css("width","100%");
300			$visualList.eq(visualIndex).find(".visual-img").css("transform","translateX(0)");
301			$visualList.eq(visualIndex).find(".overlay").fadeOut();
302			$txtList.eq(visualIndex).addClass("active").find(".main-visual-txt-con").css("animation","fadeInUp 0.8s both 0.8s");
303			$bulletList.eq(visualIndex).addClass("active");
304		}
305
306		function visualPlay(check, clickIndex){
307			/* Visual Active Play */ 
308			if(isClick == 0) {
309				isClick = 1;
310				if (check === 'bullet') {
311					visualIndex = visualNextCheck(clickIndex, check);
312				} else {
313					visualIndex = visualNextCheck(visualIndex, check);
314				}
315				slideChangeAction(visualIndex);
316			}
317		}
318		
319		/* *********************** 스크롤 ************************ */
320		var windowHeightCheck = function  () {
321			return $(window).scrollTop();
322		}
323		var $section1_top = $("#mainVisual").offset().top;
324		var $section2_top = $("#mainProductCon").offset().top;
325
326		
327		/* -------------- 메인비주얼 :: 스크롤시에 롤링 -------------- */
328		playVisualRolling(); // 처음 스크롤이 비주얼에 있을때도 실행
329		$("#header").addClass("visual-fixed"); 
330		mainVisualScroll () ;
331		function mainVisualScroll () {
332			var didScroll3;
333
334			$(window).scroll(function(event){
335				didScroll3 = true;
336			});
337
338			setInterval(function() {
339				if (didScroll3) {
340					if ($("#mainProductCon").offset().top <= $(window).scrollTop()) {
341						$("#header").removeClass("visual-fixed"); 
342					}
343					didScroll3 = false;
344				}
345			}, 250);
346		}
347		$(window).scroll(function  () {
348			playVisualRolling();
349			
350		});
351		function playVisualRolling () {
352			/*if ( windowHeightCheck() > 0) {*/
353				if ( ! visualState ) {
354					 var visual_timer = setInterval(function  () {
355						visualPlay();
356					},visualSpeed);
357					visualState = true;
358					/* Bullet Click */ 
359					$bulletList.click(function  () {
360						var clickIndex = $(this).index();
361						if ( clickIndex != visualIndex ) {
362							clearInterval(visual_timer);
363							if(isClick == 0){
364								isClick = 1;
365								resetVisual();
366								activeAndNextActive(clickIndex);
367								visualIndex = clickIndex;
368								slideChangeAction(visualIndex);
369							}
370						}
371					});
372					/* Arrow And Pause/play Click */ 
373					$btnList.find(".prev").click(function  (e) {
374						clearInterval(visual_timer);
375						visualPlay('prev');
376						visual_timer = setInterval(function  () {
377							visualPlay();
378						},visualSpeed)
379					});
380					$btnList.find(".next").click(function  (e) {
381						clearInterval(visual_timer);
382						visualPlay();
383						visual_timer = setInterval(function  () {
384							visualPlay();
385						},visualSpeed)
386					});
387				}
388			/*}*/
389		}
390		/* -- // --*/
391
392		$(window).on('resize',mainScrollFunc);
393		$("#header").addClass('fixed');
394
395		if (getWindowWidth() > 1024) {
396			mainScrollFunc();
397		}
398
399		function mainScrollFunc () {
400			var wheel_move;
401			var isPassive = function () {
402				var passiveSupported = false;
403				try {
404				  document.addEventListener("test", null, { get passive() { passiveSupported = true }});
405				} catch(e) {}
406
407				return passiveSupported;
408			}
409			
410			var scrollStop = function(event) {
411					event.preventDefault();
412					event.stopPropagation();
413					return false;
414			}
415			var browserWheelStop = function  () {
416				if (isPassive()) {
417					this.addEventListener("wheel",scrollStop, {passive: false});
418				} else {
419					$('body').on('scroll touchmove mousewheel', scrollStop);
420				}
421			}		
422			
423			if (windowHeightCheck() ===  0) {
424				browserWheelStop();
425			}
426
427			$("#mainVideoCon").on("mousewheel DOMMouseScroll", function (e, delta) { 
428				e.preventDefault();
429				if (delta < 0){ //비디오->비주얼
430					moveScrollContent($section1_top,false);
431					$("#header").addClass("visual-fixed"); 
432					return;
433				}else {
434					moveScrollContent(0,false);
435					$("#header").removeClass("visual-fixed"); 
436				}
437			});
438			$("#mainVisual").on("mousewheel DOMMouseScroll", function (e, delta) {
439				e.preventDefault();
440				if (delta > 0){
441					moveScrollContent(0,false)
442					$("#header").removeClass("visual-fixed"); 
443					return;
444				}else {
445					moveScrollContent($section2_top,true);
446					$("#header").removeClass("visual-fixed"); 
447				}
448			});
449			$("#mainProductCon").on("mousewheel DOMMouseScroll", function (e, delta) {
450				if ($(window).scrollTop() < $('#mainContent').offset().top){
451					if (delta > 0){
452						e.preventDefault();
453						moveScrollContent($section1_top,false)
454						$("#header").removeClass("visual-fixed"); 
455						return;
456					}else {
457						if (isPassive()) {
458							window.removeEventListener("wheel",scrollStop, {passive: false});
459						} else {
460							$('body').off('scroll touchmove mousewheel', scrollStop);
461						}
462					}
463				}
464			});
465		
466			function moveScrollContent (top,scrollState) {
467				if(wheel_move && wheel_move.progress() < 1){
468					return;
469				}
470				wheel_move = TweenMax.to('html, body', 0.8, {
471					scrollTop:top,
472					ease: Expo.easeInOut,
473					onComplete : function() {
474						if ( scrollState ) {
475							if (isPassive()) {
476								window.removeEventListener("wheel",scrollStop, {passive: false});
477							} else {
478								$('body').off('scroll touchmove mousewheel', scrollStop);
479							}
480						}
481					}
482				});
483			}
484		}
485	});
486});
487