jQuery(function($){
/* *********************** 메인 비주얼 ************************ */
// 임의의 영역을 만들어 스크롤바 크기 측정
function getScrollBarWidth(){
if($(document).height() > $(window).height()){
$('body').append('
');
fakeScrollBar = $('#fakescrollbar');
fakeScrollBar.append('
');
var w1 = fakeScrollBar.find('div').innerWidth();
fakeScrollBar.css('overflow-y', 'scroll');
var w2 = $('#fakescrollbar').find('div').html('html is required to init new width.').innerWidth();
fakeScrollBar.remove();
return (w1-w2);
}
return 0;
}
// 메인 비주얼 높이값 설정
$("#mainVisual.full-height").each(function () {
scrollWidth = getScrollBarWidth();
var win_width = $(window).outerWidth() + getScrollBarWidth();
var visual_height = $(window).height() - $("#productQuickMenuCon").height();
if ( win_width > 800 ) {
$("#mainVisual").height(visual_height);
}else {
$("#mainVisual").css("height","auto");
}
$(window).resize(function () {
var win_width = $(window).outerWidth() + getScrollBarWidth();
var visual_height = $(window).height() - $("#productQuickMenuCon").height();
if ( win_width > 800 ) {
$("#mainVisual").height(visual_height);
}else {
$("#mainVisual").css("height","auto");
}
});
});
var $mainVisual = $(".main-visual-con");
// 메인 비주얼 zoom-out 효과
$mainVisual.on('init', function(event, slick) {
$(".main-visual-item").eq(0).addClass("active-item");
});
$mainVisual.on('afterChange', function(event, slick, currentSlide){
$(".main-visual-item").removeClass("active-item");
$(this).find(".main-visual-item").eq(currentSlide).addClass("active-item")
});
// 메인 비주얼 슬라이드
$('.main-visual-con').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
dots:true,
autoplay: true,
speed:1000,
infinite:true,
autoplaySpeed: 4000,
easing: 'easeInOutQuint',
pauseOnHover:false
});
});
// -------------------------------------------------------버튼 효과
function btn_effect(){
$('.btn_box').each(function() {
var $circlesTopLeft = $(this).find('.circle.top-left');
var $circlesBottomRight = $(this).find('.circle.bottom-right');
var tl = new TimelineLite();
var tl2 = new TimelineLite();
var btTl = new TimelineLite({ paused: true });
tl.to($circlesTopLeft, 1.2, { x: -25, y: -25, scaleY: 2, ease: SlowMo.ease.config(0.1, 0.7, false) });
tl.to($circlesTopLeft.eq(0), 0.1, { scale: 0.2, x: '+=6', y: '-=2' });
tl.to($circlesTopLeft.eq(1), 0.1, { scaleX: 1, scaleY: 0.8, x: '-=10', y: '-=7' }, '-=0.1');
tl.to($circlesTopLeft.eq(2), 0.1, { scale: 0.2, x: '-=15', y: '+=6' }, '-=0.1');
tl.to($circlesTopLeft.eq(0), 1, { scale: 0, x: '-=5', y: '-=15', opacity: 0 });
tl.to($circlesTopLeft.eq(1), 1, { scaleX: 0.4, scaleY: 0.4, x: '-=10', y: '-=10', opacity: 0 }, '-=1');
tl.to($circlesTopLeft.eq(2), 1, { scale: 0, x: '-=15', y: '+=5', opacity: 0 }, '-=1');
var tlBt1 = new TimelineLite();
var tlBt2 = new TimelineLite();
tlBt1.set($circlesTopLeft, { x: 0, y: 0, rotation: -45 });
tlBt1.add(tl);
tl2.set($circlesBottomRight, { x: 0, y: 0 });
tl2.to($circlesBottomRight, 1.1, { x: 30, y: 30, ease: SlowMo.ease.config(0.1, 0.7, false) });
tl2.to($circlesBottomRight.eq(0), 0.1, { scale: 0.2, x: '-=6', y: '+=3' });
tl2.to($circlesBottomRight.eq(1), 0.1, { scale: 0.8, x: '+=7', y: '+=3' }, '-=0.1');
tl2.to($circlesBottomRight.eq(2), 0.1, { scale: 0.2, x: '+=15', y: '-=6' }, '-=0.2');
tl2.to($circlesBottomRight.eq(0), 1, { scale: 0, x: '+=5', y: '+=15', opacity: 0 });
tl2.to($circlesBottomRight.eq(1), 1, { scale: 0.4, x: '+=7', y: '+=7', opacity: 0 }, '-=1');
tl2.to($circlesBottomRight.eq(2), 1, { scale: 0, x: '+=15', y: '-=5', opacity: 0 }, '-=1');
tlBt2.set($circlesBottomRight, { x: 0, y: 0, rotation: 45 });
tlBt2.add(tl2);
btTl.add(tlBt1);
btTl.to($(this).parent().find('.button.effect-button'), 0.8, { scaleY: 1.1 }, 0.1);
btTl.add(tlBt2, 0.2);
btTl.to($(this).parent().find('.button.effect-button'), 1.8, { scale: 1, ease: Elastic.easeOut.config(1.2, 0.4) }, 1.2);
btTl.timeScale(2.6);
$(this).on('mouseenter', function() {
btTl.restart();
});
});
}
// -------------------------------------------------------value 효과
function value(){
$(".value_section .con_box li").on("mouseenter", function(){
$(".value_section .con_box li").removeClass('active');
$(this).addClass('active');
});
$(".value_section .con_box li").each(function(index, item){
var bg_num = index + 1;
$(item).on("mouseenter", function(){
$(".value_img .bg_box").removeClass("active");
$(".value_img .bg_box_0" + bg_num).addClass("active");
$(".value_section .tab_box .tabMenu li").removeClass("active");
$(".value_section .tab_box .tabMenu .tab_menu_0" + bg_num).addClass("active");
});
});
$(".value_section .tab_box .tabMenu li").click(function(){
var activeTab = $(this).attr("data-tabNumb");
$(".value_section .tab_box .tabMenu li").removeClass("active");
$(this).addClass("active");
$(".value_section .con_box li").removeClass("active");
$("#"+activeTab).addClass("active");
$(".value_img .bg_box").removeClass("active");
$("#"+activeTab+"_bg").addClass("active");
});
}
$(document).ready(function(){
value();
btn_effect();
});
function mo_effect(){
setTimeout(function() {
$(".value_section .con_box li:first-of-type").addClass("mo_active");
$(".value_section .value_img .bg_box:first-of-type").addClass("mo_active");
}, 200);
}
$(document).ready(function(){
mo_effect();
});