ken
/
fgu_b1_new
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

up

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/stylesheets/template/modules/ad_banner.scss
View File

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

109
modules/ad_banner/_ad_banner_widget0.html.erb
View File

@ -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']
});
}
});
</script>
<style type="text/css">
.w-ba-banner .controlplay .pause-slide.active i{