var script = function() { var $body = $('html,body'); var winH = $(window).height(); var winW = $(window).width(); // var docH = $(document).height(); var $win = $(window); var scrollBottom = $(window).scrollTop() + $(window).height(); var conH = $('.wrapper').height(); // var headerH = $('header').height(); var headerH = $('.myheader2').height(); var $sec = $('.sec'); var hash = location.hash, href; /* page scroll */ var thispage = 0; var pagescroll = true; var pageT = [], $sec = $('.sec'), $main = $('.wrapper'), // _mainTOP = $main.offset().top, ah = $main.outerHeight(true), pageName = ['kv', 'trend', 'unboxing' , 'gift', 'store']; var _thispagescroll = pageName.indexOf(hash); /* slick ---------------------------------------------------*/ $('.slide').slick({ dots: true, arrows: true, slidesToShow: 1, slidesToScroll: 1, infinite: false // autoplay: true, // autoplaySpeed: 2000 }); // $('.sec3').find('.slidebox').slick({ // dots: true, // arrows: true // // autoplay: true, // // autoplaySpeed: 4000 // }); // $('.sec2 ._slick').slick({ // centerMode: true, // centerPadding: "20%", // slidesToShow: 3, // slidesToScroll: 1, // infinite: true, // autoplay: true, // autoplaySpeed: 4000, // speed: 300, // dots: true, // responsive: [ // { // breakpoint: 769, // settings: { // centerMode: true, // centerPadding: "18%", // slidesToShow: 1, // initialSlide: 1 // } // } // ] // }); $('.arrow-box ._prev').on('click', function(){ $('.act-box .slick-prev').click(); }) $('.arrow-box ._next').on('click', function(){ $('.act-box .slick-next').click(); }) /* header fix ---------------------------------------------------*/ var _sec2pos = $('.sec2').offset().top; function headerfix() { var _scroll = $win.scrollTop(); if(_scroll >= _sec2pos /2){ $('.myheader2').fadeIn('fast'); }else{ $('.myheader2').fadeOut('fast'); } } $win.scroll(headerfix); // 母親節優惠 $('.btn-gift').on('click', function(){ var giftTop = $('.gift-line').offset().top; $body.stop().animate({ scrollTop: giftTop - headerH }, 600); }) /* 選單 ---------------------------------------------------*/ // 手機fix // function navfix() { // var _scroll = $win.scrollTop(); // if( winW<=768 ){ // if(_scroll >= 65){ // $('.nav').addClass('fixed'); // }else{ // $('.nav').removeClass('fixed'); // } // }else{ // $('.nav').removeClass('fixed'); // } // } // navfix(); // $win.scroll(navfix); // // 展開收闔 // function navslide() { // var _pos = $('.sec1').offset().top; // var _scroll = $win.scrollTop(); // if( _scroll >= _pos /2){ // $('.nav').removeClass('open'); // } // } // $win.scroll(navslide); // 重設 function navde() { $('.mainnav').find('li').removeClass('open'); $('.subnav').hide(); $('.burger').attr('toggle', '0'); $('.burger').removeClass('isclick'); $('.mainnav').css('height',''); TweenMax.to('.myheader', .1, { backgroundColor:'transparent', ease: Quart.easeOut }); TweenMax.to($('.myheader').find('.logo').find('a') , .1 ,{autoAlpha:1 ,ease:Linear.easeNone}); $('.logonav').hide(); $('body').css({ 'overflow-y':'', 'position': '', 'height':'' }); // $('.mainnav').css('display','flex'); if(winW <= 768){ $('.mainnav').hide(); }else{ $('.mainnav').show(); } } navde(); // 主選單 function navfunc() { var navopen = $('.burger').attr('toggle'); if( navopen == 0 ){ $('.mainnav').css('height','100vh'); TweenMax.to('.myheader', .1, { backgroundColor:'rgba(255,255,255, 1)', ease: Quart.easeOut }); $('.mainnav').slideDown(); $('body').css({ 'overflow-y': 'hidden', // 'position': 'fixed', 'height':'100%' }); $('.burger').attr('toggle', '1'); $('.burger').addClass('isclick'); } else if( navopen == 1 ){ $('.mainnav').css('height',''); TweenMax.to('.myheader', .5, { backgroundColor:'transparent', delay: .3, ease: Quart.easeOut }); $('.mainnav').slideUp(); $('body').css({ 'overflow-y':'', 'position': '', 'height':'' }); $('.burger').attr('toggle', '0'); $('.burger').removeClass('isclick'); } } $('.burger').click(navfunc); // 子選單 function subnavfunc() { if( $('.subnav').length ){ $(this).toggleClass('open'); if( $(this).hasClass('open') ){ $(this).find('.subnav').slideDown(); }else{ $(this).find('.subnav').slideUp(); } } } $('.mainnav').find('li').click(subnavfunc); // 影片區 $('.play-list .item').on('click', playThis) function playThis() { var vid = $(this).data('vid'); // alert(vid) $('.video iframe').attr('src','https://www.youtube.com/embed/' + vid ); $('.play-list .item').removeClass('active'); $(this).addClass('active'); } /* nav scroll --------------------------------------------*/ /* page scroll */ var thispage = 0; var pagescroll = true; var pageT = [], $sec = $('.sec'), $main = $('.wrapper'), ah = $main.outerHeight(true); // var _thispagescroll = pageName.includes(hash); // var hash = location.hash; var $navbtn = $('.navbtn'); // var navRe = function() { // $('.btn_nav').removeClass('isclick'); // $('.nav').fadeOut(); // $('.nav .inner').removeClass('in'); // } var pageReset = function() { pageT = []; winW = $win.width(); ah = $main.outerHeight(true); $sec.each( function(i, obj) { var t = $(obj).offset().top; pageT.push(t); if (i == $sec.length - 1) { pageT.push(ah); } } ); // console.log(pageT) } var menuselect = function() { $navbtn.removeClass('select'); // console.log(thispage) pageReset(); // if (winW>=1024){ // $('.navbtn[data-page="' + thispage + '"]').addClass('select'); // } $('.navbtn[data-page="' + thispage + '"]').addClass('select'); } var menuscroll = function(n) { var _pos; thispage = n; // if(thispage!==1){sliderclose();} pageReset(); // if (winW <= _media) { $headerH = 47; } else { $headerH = 50; } // if (n !== 0) { _pos = $headerH; } else { _pos = 0; } // TweenMax.to('body,html', .8, { scrollTop: pageT[thispage], ease: Quart.easeOut }); $body.animate({ scrollTop: pageT[thispage] - headerH }, 600); // if(thispage == 4){ sec5Pagechange();} // _menuopen = true; // menuClick(); } var scrollPage = function(wt, whelf) { winH = $win.height(); winW = $win.width(); wt = $win.scrollTop(); whelf = winH / 3; _mainTOP = $main.offset().top; for (var p = 0; p < $sec.length; p++) { if (wt > pageT[p] - whelf && wt < pageT[p + 1] - whelf) { thispage = p; } } // console.log(thispage) // navidx = thispage-1 // if (wt > _mainTOP){ // if(thispage == 1){ // // $('.navbtn').eq(navidx).addClass('active').siblings().removeClass('active'); // } // if(thispage == 2){ // } // if(thispage == 3){ // } // if(thispage == 4){ // } // } // if(winW > _media){ // if(thispage == 1 && autoOpen){ // slideropen(); // autoOpen=false; // } // else if(thispage !==1){ // autoOpen=true; // } // }else{ // if(thispage == 1 && autoOpen){slideropen(); console.log(autoOpen); autoOpen=false;} // } // if (wt > _mainTOP) { // var w = $header.width(); // $header.addClass('fix'); // $header.css('marginLeft',-(w/2)); // } else { // $header.removeClass('fix'); // $header.css('marginLeft','0'); // } menuselect(); href = pageName[thispage]; window.location.hash = href; } var scrollthispage = function() { var _pos; _thispagescroll = pageName.indexOf(hash.substr(1)); console.log(_thispagescroll) pageReset(); if (_thispagescroll != -1) { thispage = pageName.indexOf(hash.substr(1)); pageReset(); // if (winW <= _media) { $headerH = 47; } else { $headerH = 50; } // if (thispage !== 0) { _pos = $headerH; } else { _pos = 0; } if (thispage == 0) { TweenMax.to('body,html', .8, { scrollTop: 0, ease: Quart.easeOut }); } else { // $body.animate({ // scrollTop: pageT[thispage] - headerH // }, 600); TweenMax.to('body,html', .8, { scrollTop: pageT[thispage] - headerH, ease: Quart.easeOut }); } menuselect(); href = pageName[thispage]; window.location.hash = href; pagescroll = false; } else { TweenMax.to('body,html', .8, { scrollTop: 0, ease: Quart.easeOut }); // lbhref = window.location.hash.substr(1); // TweenMax.to('body,html', .8, { scrollTop: 0, ease: Quart.easeOut,onComplete:function() }; } $navbtn.click( function() { var n = $(this).data('page'); // if($(this).attr('data-sec5list')) thisS5 = $(this).data('sec5list'); menuscroll(n); navde(); // if(winW<=1024){ navRe();} // if(_lb)lbClose(); // _lb = true; } ); setTimeout(function() { // scrollthispage(); n = pageName.indexOf(hash.substr(1)); menuscroll(n) }, 1000); // scrollthispage(); /* sec4 切換 -----------------------------------------------------*/ var thisS4 = 0, prevS4 = '', $btn_sec4 = $('.sec4 .tabbtn'); var sec4Pagechange = function () { if(thisS4 !== prevS4)$('.sec4 .list').fadeOut(0); $('.sec4 .list[data-list ="' + thisS4 + '"]').fadeIn(500); $btn_sec4.removeClass('select'); $btn_sec4.eq(thisS4).addClass('select'); prevS4 = thisS4; } sec4Pagechange(thisS4); $btn_sec4.click(function(){ thisS4 = $(this).index(); sec4Pagechange(); }); /* lightbox ------------------------------------------------------------*/ // var lightbox = function(){ var $lb = $('.lb'), $lbbox = $('.lbbox'); var _vdUrl = 'https://www.youtube.com/embed/' var lb_data; // lbname = 'announcement'; // TweenMax.set($('.lb'),{autoAlpha:0}); // TweenMax.set($('.lb') ,{css:{zIndex:-1}}); var lbOpen = function(lb_data){ var lbAni = new TimelineMax(); lbAni.to($('.lb[data-lb="'+lb_data+'"]') , .5 ,{css:{zIndex:1000}} , '-=.5') .to($('.lb[data-lb="'+lb_data+'"]') , .5 ,{autoAlpha:1 ,ease:Linear.easeNone}); } var lbClose = function(){ var lbCloseAni = new TimelineMax(); lbCloseAni.to($('.lb') , .5 ,{autoAlpha:0 ,ease:Linear.easeNone}) .to($('.lb') , .5 ,{css:{zIndex:-1}}); $('#youtuUrl').attr('src' ,''); } // lbOpen(lbname); $('.libtn').click(function(){ var lbname = $(this).data('lb'); var ytid = $(this).attr('ytid'); lbOpen(lbname); $('#youtuUrl').attr('src' ,_vdUrl+ytid+'?autoplay=1&wmode=opaque&showinfo=0'); return false; }); $('.lb .btn_x').click(lbClose); // } // lightbox(); $('body').click(function(e){ var _con = $('.lbbox'); // 设置目标区域 if(!_con.is(e.target) && _con.has(e.target).length === 0){ // Mark 1 lbClose(); } }); /* resize ------------------------------------------------------------*/ var _resize = function() { winW = $win.width(); winH = $win.height(); docH = $(document).height(); _scroll = $(window).scrollTop(); scrollBottom = $(window).scrollTop() + $(window).height(); // headerH = $('header').height(); headerH = $('.myheader2').height(); navde(); // if (pagescroll || winW > 1000) scrollthispage(); if ( winW > 768 ){ $('._mb').remove(); }else{ $('._pc').remove(); } // navfix(); } $win.scroll(scrollPage); _resize(); $win.resize(function() { // _resize(); }); var windowHeight = $(window).height(); // Resize Event $(window).resize(function() { // Check window width has actually changed and it's not just iOS triggering a resize event on scroll if ($(window).width() != windowHeight) { // Update the window width for next time windowHeight = $(window).width(); // Do stuff here _resize(); // if (pagescroll || windowHeight > 768) scrollthispage(); } }); }; $(function() { // $('header').load('include/header.html'); // $('footer').load('include/footer.html'); // var imagesLoaded = loading(); // imagesLoaded.loadfunc(); // imagesLoaded.callback = function(){ // script(); // }; script(); setTimeout(function(){ $(".loading").fadeOut(); }, 1000); $('.gb-footer-2019__btn-top').click(function () { var $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body'); $body.animate({ scrollTop: 0 }, 600); }) });