diff --git a/assets/javascripts/app.js b/assets/javascripts/app.js index 7fc8701..a423d7a 100644 --- a/assets/javascripts/app.js +++ b/assets/javascripts/app.js @@ -4158,7 +4158,18 @@ $(function() { }); }, 500); }); - +$(function () { + setTimeout(function () { + var $banner = $('[data-pp="1999"]'); + if ($banner.length && $banner.find('.w-ad-banner').length === 0) { + $('.dropdowns').css({ + 'position': 'relative', + 'padding-bottom': '0', + 'background': '#256b86' + }); + } + }, 500); +}); //ai須新增的function diff --git a/assets/stylesheets/template/modules/ad_banner.scss b/assets/stylesheets/template/modules/ad_banner.scss index 79f172d..2ebaadb 100644 --- a/assets/stylesheets/template/modules/ad_banner.scss +++ b/assets/stylesheets/template/modules/ad_banner.scss @@ -14,27 +14,43 @@ margin-top: 8em; } } -.ba-banner-widget-youtube{ +.ba-banner-widget-youtube { overflow: hidden; - iframe{ - @media(min-width:1025px){ - position: absolute; - top: -180px; - left: 0; - width: 100%; - height: calc(100% + 215px); - } - } - .jarallax-video-audio{ - @media(min-width:769px){ - top: 7em; - } - } - .w-ba-banner__wrap{ - height: auto !important; + height: auto !important; + .w-ad-banner__caption_text{ + display: none!important; } .banner-overlay{ - @media(max-width:768px){ + visibility: visible!important; + } + iframe { + @media(min-width: 1025px) { + position: absolute; + top: -15vw; + left: 0; + width: 100%; + height: calc(100% + 11vw); + } + } + + .w-ba-banner__wrap { + overflow: hidden; + position: relative; + + // ✅ 固定顯示區域高度，超出的底部黑條就被裁切 + @media(min-width: 1025px) { + height: 40vw !important; + } + } + + .jarallax-video-audio { + @media(min-width: 769px) { + top: 7em; + } + } + + .banner-overlay { + @media(max-width: 768px) { position: relative; } } @@ -290,10 +306,16 @@ ul.button-mid{ } // Widget 0 .ba-banner-widget-0 { - height: 70vh !important; + @media(max-width:768px){ + height: 30vh !important; + .w-ba-banner__wrap{ + height: 30vh !important; + } + } + height: 50vh; z-index: 0; .w-ba-banner__wrap{ - height: 70vh !important; + height: 50vh; } .youtube, .cycle-youtube { width: 100%; @@ -323,7 +345,7 @@ ul.button-mid{ // text-shadow: 1px 1px 1px #0000008c; } img{ - position: fixed; + // position: fixed; top:0; left: 0; @media(max-width: 1500px){ diff --git a/modules/ad_banner/_ad_banner_widget0.html.erb b/modules/ad_banner/_ad_banner_widget0.html.erb index 70620a6..6a70f7f 100644 --- a/modules/ad_banner/_ad_banner_widget0.html.erb +++ b/modules/ad_banner/_ad_banner_widget0.html.erb @@ -63,62 +63,73 @@ $('[data-subpart-id="{{subpart-id}}"] .prev-button').click(function(){ $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("prev"); }); - $(function() { - function updateBannerClip() { - $('.ba-banner-widget-0').each(function() { - var $banner = $(this); - var vpWidth = $(window).width(); - var vpHeight = $(window).height(); +$(function() { + function updateBannerParallax() { + $('.ba-banner-widget-0').each(function() { + var $banner = $(this); - // --- 寬度：找比 viewport 窄的父層容器 --- - var $container = null; - $banner.parents().each(function() { - var $el = $(this); - if ($el.outerWidth() < vpWidth - 10) { - $container = $el; - return false; - } - }); - var clipLeft = 0; - var clipRight = 0; - if ($container && $container.length > 0) { - clipLeft = Math.max(0, $container.offset().left); - clipRight = Math.max(0, vpWidth - $container.offset().left - $container.outerWidth()); - } + if ($banner.closest('.homebanner').is(':hidden')) return; - // --- 高度：依 .w-ad-banner 自己區塊的上下邊界裁切 --- - var bannerTop = $banner.offset().top - $(window).scrollTop(); - var bannerBottom = vpHeight - bannerTop - $banner.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 clipTop = Math.max(0, bannerTop); - var clipBottom = Math.max(0, bannerBottom); + var bannerOffsetTop = $banner.offset().top; + var parallaxOffset = Math.max(0, (scrollTop - bannerOffsetTop) * 0.4); - var clipValue = 'inset(' - + clipTop + 'px ' - + clipRight + 'px ' - + clipBottom + 'px ' - + clipLeft + 'px)'; - - $banner.find('img.w-ba-banner__image').css('clip-path', clipValue); + $img.css({ + 'position' : 'absolute', + 'top' : parallaxOffset + 'px', + 'left' : '0', + 'width' : '100%', + 'height' : (wrapHeight * 1.3) + 'px', + 'object-fit': 'cover' }); - } - // 初始執行 - setTimeout(updateBannerClip, 300); + var bannerLeft = $banner.offset().left; + var bannerWidth = $banner.outerWidth(); + var clipLeft = Math.max(0, bannerLeft); + var clipRight = Math.max(0, vpWidth - bannerLeft - bannerWidth); - // 視窗縮放時重新計算 - var resizeTimer; - $(window).on('resize', function() { - clearTimeout(resizeTimer); - resizeTimer = setTimeout(updateBannerClip, 100); + if (clipRight < vpWidth * 0.8) { + $img.css('clip-path', 'inset(0px ' + clipRight + 'px 0px ' + clipLeft + 'px)'); + } else { + $img.css('clip-path', 'none'); + } }); + } - // ✅ 滾動時也要更新，因為 bannerTop 會隨捲動改變 - $(window).on('scroll', function() { - updateBannerClip(); - }); + $('.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'] + }); + } +}); +