This commit is contained in:
parent
c83a16e9ed
commit
b367387c77
|
|
@ -45,7 +45,7 @@
|
||||||
|
|
||||||
.jarallax-video-audio {
|
.jarallax-video-audio {
|
||||||
@media(min-width: 769px) {
|
@media(min-width: 769px) {
|
||||||
top: 7em;
|
top: 8em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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{
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue