diff --git a/assets/stylesheets/template/modules/ad_banner.scss b/assets/stylesheets/template/modules/ad_banner.scss index 2ebaadb..dc94d7a 100644 --- a/assets/stylesheets/template/modules/ad_banner.scss +++ b/assets/stylesheets/template/modules/ad_banner.scss @@ -45,7 +45,7 @@ .jarallax-video-audio { @media(min-width: 769px) { - top: 7em; + top: 8em; } } diff --git a/modules/ad_banner/_ad_banner_widget0.html.erb b/modules/ad_banner/_ad_banner_widget0.html.erb index 6a70f7f..7b1dbf0 100644 --- a/modules/ad_banner/_ad_banner_widget0.html.erb +++ b/modules/ad_banner/_ad_banner_widget0.html.erb @@ -63,73 +63,76 @@ $('[data-subpart-id="{{subpart-id}}"] .prev-button').click(function(){ $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("prev"); }); -$(function() { - function updateBannerParallax() { - $('.ba-banner-widget-0').each(function() { - var $banner = $(this); + $(function() { + function updateBannerParallax() { + $('.ba-banner-widget-0').each(function() { + var $banner = $(this); + if ($banner.closest('.homebanner').is(':hidden')) return; - if ($banner.closest('.homebanner').is(':hidden')) return; + var $wrap = $banner.find('.w-ba-banner__wrap'); + var $img = $banner.find('img.w-ba-banner__image'); + var vpWidth = $(window).width(); + var scrollTop = $(window).scrollTop(); + var wrapHeight = $wrap.outerHeight(); - var $wrap = $banner.find('.w-ba-banner__wrap'); - var $img = $banner.find('img.w-ba-banner__image'); - var vpWidth = $(window).width(); - var scrollTop = $(window).scrollTop(); - var wrapHeight = $wrap.outerHeight(); + var bannerOffsetTop = $banner.offset().top; + var parallaxOffset = Math.max(0, (scrollTop - bannerOffsetTop) * 0.4); - var bannerOffsetTop = $banner.offset().top; - var parallaxOffset = Math.max(0, (scrollTop - bannerOffsetTop) * 0.4); + $img.css({ + 'position' : 'absolute', + 'top' : parallaxOffset + 'px', + 'left' : '0', + 'width' : '100%', + 'height' : (wrapHeight * 1.3) + 'px', + 'object-fit': 'cover' + }); - $img.css({ - 'position' : 'absolute', - 'top' : parallaxOffset + 'px', - 'left' : '0', - 'width' : '100%', - 'height' : (wrapHeight * 1.3) + 'px', - 'object-fit': 'cover' + // ✅ 只有當 banner 本身寬度等於 viewport 寬度(撐滿)時才做左右裁切 + // 在 80% container 裡面的 banner 不需要裁切左右 + var bannerWidth = $banner.outerWidth(); + var isFullWidth = Math.abs(bannerWidth - vpWidth) < 10; + + if (isFullWidth) { + var bannerLeft = $banner.offset().left; + var clipLeft = Math.max(0, bannerLeft); + var clipRight = Math.max(0, vpWidth - bannerLeft - bannerWidth); + $img.css('clip-path', 'inset(0px ' + clipRight + 'px 0px ' + clipLeft + 'px)'); + } else { + // ✅ banner 在 container 裡面,不裁左右 + $img.css('clip-path', 'none'); + } }); + } - var bannerLeft = $banner.offset().left; - var bannerWidth = $banner.outerWidth(); - var clipLeft = Math.max(0, bannerLeft); - var clipRight = Math.max(0, vpWidth - bannerLeft - bannerWidth); + $('.ba-banner-widget-0 .w-ba-banner__wrap').css('overflow', 'hidden'); - if (clipRight < vpWidth * 0.8) { - $img.css('clip-path', 'inset(0px ' + clipRight + 'px 0px ' + clipLeft + 'px)'); - } else { - $img.css('clip-path', 'none'); + setTimeout(updateBannerParallax, 300); + + var resizeTimer; + $(window).on('resize', function() { + clearTimeout(resizeTimer); + resizeTimer = setTimeout(updateBannerParallax, 100); + }); + + $(window).on('scroll', function() { + updateBannerParallax(); + }); + + var navFixedObserver = new MutationObserver(function() { + if (!$('.outdropdowns').hasClass('navFixed')) { + setTimeout(updateBannerParallax, 100); } }); - } - $('.ba-banner-widget-0 .w-ba-banner__wrap').css('overflow', 'hidden'); - - setTimeout(updateBannerParallax, 300); - - var resizeTimer; - $(window).on('resize', function() { - clearTimeout(resizeTimer); - resizeTimer = setTimeout(updateBannerParallax, 100); - }); - - $(window).on('scroll', function() { - updateBannerParallax(); - }); - - var navFixedObserver = new MutationObserver(function() { - if (!$('.outdropdowns').hasClass('navFixed')) { - setTimeout(updateBannerParallax, 100); + if ($('.outdropdowns').length) { + navFixedObserver.observe($('.outdropdowns')[0], { + attributes: true, + attributeFilter: ['class'] + }); } }); - if ($('.outdropdowns').length) { - navFixedObserver.observe($('.outdropdowns')[0], { - attributes: true, - attributeFilter: ['class'] - }); - } -}); -