This commit is contained in:
ken 2026-09-29 20:02:50 +08:00
parent c83a16e9ed
commit b367387c77
2 changed files with 57 additions and 54 deletions

View File

@ -45,7 +45,7 @@
.jarallax-video-audio { .jarallax-video-audio {
@media(min-width: 769px) { @media(min-width: 769px) {
top: 7em; top: 8em;
} }
} }

View File

@ -63,73 +63,76 @@
$('[data-subpart-id="{{subpart-id}}"] .prev-button').click(function(){ $('[data-subpart-id="{{subpart-id}}"] .prev-button').click(function(){
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("prev"); $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("prev");
}); });
$(function() { $(function() {
function updateBannerParallax() { function updateBannerParallax() {
$('.ba-banner-widget-0').each(function() { $('.ba-banner-widget-0').each(function() {
var $banner = $(this); 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 bannerOffsetTop = $banner.offset().top;
var $img = $banner.find('img.w-ba-banner__image'); var parallaxOffset = Math.max(0, (scrollTop - bannerOffsetTop) * 0.4);
var vpWidth = $(window).width();
var scrollTop = $(window).scrollTop();
var wrapHeight = $wrap.outerHeight();
var bannerOffsetTop = $banner.offset().top; $img.css({
var parallaxOffset = Math.max(0, (scrollTop - bannerOffsetTop) * 0.4); 'position' : 'absolute',
'top' : parallaxOffset + 'px',
'left' : '0',
'width' : '100%',
'height' : (wrapHeight * 1.3) + 'px',
'object-fit': 'cover'
});
$img.css({ // ✅ 只有當 banner 本身寬度等於 viewport 寬度(撐滿)時才做左右裁切
'position' : 'absolute', // 在 80% container 裡面的 banner 不需要裁切左右
'top' : parallaxOffset + 'px', var bannerWidth = $banner.outerWidth();
'left' : '0', var isFullWidth = Math.abs(bannerWidth - vpWidth) < 10;
'width' : '100%',
'height' : (wrapHeight * 1.3) + 'px', if (isFullWidth) {
'object-fit': 'cover' 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; $('.ba-banner-widget-0 .w-ba-banner__wrap').css('overflow', 'hidden');
var bannerWidth = $banner.outerWidth();
var clipLeft = Math.max(0, bannerLeft);
var clipRight = Math.max(0, vpWidth - bannerLeft - bannerWidth);
if (clipRight < vpWidth * 0.8) { setTimeout(updateBannerParallax, 300);
$img.css('clip-path', 'inset(0px ' + clipRight + 'px 0px ' + clipLeft + 'px)');
} else { var resizeTimer;
$img.css('clip-path', 'none'); $(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'); if ($('.outdropdowns').length) {
navFixedObserver.observe($('.outdropdowns')[0], {
setTimeout(updateBannerParallax, 300); attributes: true,
attributeFilter: ['class']
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']
});
}
});
</script> </script>
<style type="text/css"> <style type="text/css">
.w-ba-banner .controlplay .pause-slide.active i{ .w-ba-banner .controlplay .pause-slide.active i{