This commit is contained in:
parent
aff2c8a5ff
commit
e58bbb675b
|
|
@ -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
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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){
|
||||
|
|
|
|||
|
|
@ -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']
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
<style type="text/css">
|
||||
.w-ba-banner .controlplay .pause-slide.active i{
|
||||
|
|
@ -136,4 +147,11 @@
|
|||
.next-button,.prev-button{
|
||||
cursor: pointer;
|
||||
}
|
||||
.ba-banner-widget-0.w-ad-banner__image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue