var script = function() { var $body = $('html,body'); var winH = $(window).height(); var winW = $(window).outerWidth(); // var docH = $(document).height(); var $win = $(window); var scrollBottom = $(window).scrollTop() + $(window).height(); var conH = $('.wrapper').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', 'introduction','introduction','introduction','spevent', 'moresp']; pageName = ['kv', 'introduction', 'rebate', 'discount', 'clearance', 'IM04','newproduct', 'limited', 'moresp']; var _thispagescroll = pageName.indexOf(hash); /* slick ---------------------------------------------------*/ if (winW <= 768) { $('.sec5 .main').slick({ slidesToShow: 1, slidesToScroll: 1, dots: true, infinite: true, centerMode: true, centerPadding: '80px', autoplaySpeed: 2000, }); $('.sec6 .group').slick({ slidesToShow: 1, slidesToScroll: 1, dots: true, infinite: true, centerMode: true, centerPadding: '100px', autoplaySpeed: 2000, }); } else { } AOS.init({ offset: 0, duration: 1200, easing: 'ease-in-out', anchorPlacement: 'top-bottom', }); $('.sec8 .content').mCustomScrollbar({ scrollInertia: 500, autoDraggerLength: false, axis: "y" }); $('.fixgoBtn .copy').click(function() { var temp = $(''); // 建立input物件 $('body').append(temp); // 將input物件增加到body var url = location.href; // 取得要複製的連結 temp.val(url).select(); // 將連結加到input物件value document.execCommand('copy'); // 複製 temp.remove(); // 移除input物件 var lbname = $(this).data('lb'); lbOpen(lbname); setTimeout(function() { lbClose(); }, 1000); }); $('.btnback').click(function() { TweenMax.to('body,html', .8, { scrollTop: 0, ease: Quart.easeOut }); }); /* header fix ---------------------------------------------------*/ var _sec2pos = $('.sec2').offset().top; function headerfix() { var _scroll = $win.scrollTop(); if (_scroll >= _sec2pos - 100) { $('.myheader2').fadeIn('fast'); } else { $('.myheader2').fadeOut('fast'); } } // $win.scroll(headerfix); // 重設 function navde() { $('.mainnav').find('li').removeClass('open'); // $('.subnav').hide(); $('.burger').attr('toggle', '0'); $('.burger').removeClass('isclick'); $('.mainnav').css('height', ''); if (winW <= 768) { TweenMax.to('.myheader', .05, { backgroundColor: '#7f419f', ease: Quart.easeOut }); $('.myheader').css({ 'height': '', 'opacity': 0 }); $('.mainnav').hide(); } else { $('.mainnav').show(); $('.myheader').css('height', ''); } $('body').css({ 'overflow-y': '', 'position': '', 'height': '' }); } navde(); // 主選單 function navfunc() { var navopen = $('.burger').attr('toggle'); if (navopen == 0) { $('.mainnav').slideDown(50); $('.myheader').css({ 'height': '100vh', 'overflow': '', 'opacity': 1 }); TweenMax.to('.myheader', .01, { backgroundColor: 'rgb(127, 65, 159)', ease: Quart.easeOut }); $('body').css({ 'overflow-y': 'hidden', 'position': 'fixed', 'height': '100%' }); $('.burger').attr('toggle', '1'); $('.burger').addClass('isclick'); } else if (navopen == 1) { $('.mainnav').css('height', ''); $('.myheader').css({ 'height': '15vw', 'opacity': 0 }); TweenMax.to('.myheader', .01, { backgroundColor: 'rgb(127, 65, 159)', ease: Quart.easeOut }); $('.mainnav').slideUp(); $('body').css({ 'overflow-y': '', 'position': '', 'height': '' }); $('.burger').attr('toggle', '0'); $('.burger').removeClass('isclick'); } } $('.burger').click(navfunc); /* nav scroll --------------------------------------------*/ /* page scroll */ var thispage = 0; var pagescroll = true; var pageT = [], $sec = $('.sec'), $main = $('.wrapper'), ah = $main.outerHeight(true); var $navbtn = $('.navbtn'); var pageReset = function() { pageT = []; winW = $win.outerWidth(); 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); } } ); } var menuselect = function() { $navbtn.removeClass('select'); pageReset(); $('.navbtn[data-page="' + thispage + '"]').addClass('select'); // h1width(); } var menuscroll = function(n) { var _pos; thispage = n; pageReset(); if (winW <= 768) { $body.animate({ scrollTop: pageT[thispage] }, 600); } else { $body.animate({ scrollTop: pageT[thispage] + 20 }, 600); } } var scrollPage = function(wt, whelf) { winH = $win.height(); winW = $win.outerWidth(); wt = $win.scrollTop(); whelf = winH / 6; // _mainTOP = $main.offset().top; for (var p = 0; p < $sec.length; p++) { if (wt > pageT[p] - whelf && wt < pageT[p + 1] - whelf) { thispage = p; } } menuselect(); href = pageName[thispage]; window.location.hash = href; } var scrollthispage = function() { var _pos; _thispagescroll = pageName.indexOf(hash.substr(1)); pageReset(); var topH = $('.myheader2').height(); if (_thispagescroll != -1) { thispage = pageName.indexOf(hash.substr(1)); pageReset(); if (thispage == 0) { TweenMax.to('body,html', .8, { scrollTop: 0, ease: Quart.easeOut }); } else { TweenMax.to('body,html', .8, { scrollTop: pageT[thispage] - topH, ease: Quart.easeOut }); } menuselect(); href = pageName[thispage]; window.location.hash = href; pagescroll = false; } else { TweenMax.to('body,html', .8, { scrollTop: 0, ease: Quart.easeOut }); }; } setTimeout(function() { scrollthispage() }, 600); $navbtn.click( function() { var n = $(this).data('page'); menuscroll(n); // h1width();s navde(); } ); window.addEventListener('load', AOS.refresh); /* lightbox ------------------------------------------------------------*/ // var lightbox = function(){ var $lb = $('.lb'), $lbbox = $('.lbbox'); var lb_data; var lb_picture; // 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 }); // $body.css({ // 'overflow': 'hidden' // }) } var lbClose = function() { // $('.lb .picture').attr("src", ""); $('.lbbox1 .ifrWrap #youtuUrl').attr('src', ""); var lbCloseAni = new TimelineMax(); lbCloseAni.to($('.lb'), .3, { autoAlpha: 0, ease: Linear.easeNone }) .to($('.lb'), .3, { css: { zIndex: -1 } }); $body.css({ 'overflow': '' }) } $('.lb .btn_x').click(lbClose); /* resize ------------------------------------------------------------*/ var _resize = function() { winW = $win.outerWidth(); winH = $win.height(); docH = $(document).height(); _scroll = $(window).scrollTop(); scrollBottom = $(window).scrollTop() + $(window).height(); headerH = $('.myheader2').height(); // _sec1pos = $('.sec1').offset().top; navde(); // if (pagescroll || winW > 1000) scrollthispage(); // 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(); $('.gb-footer-2019__btn-top').click(function() { var $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body'); $body.animate({ scrollTop: 0 }, 600); }) });