diff --git a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js index 311326e..79c110a 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js +++ b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js @@ -89,10 +89,7 @@ export const createMarketingHeader = const container2 = createElement('div', ['container', 'mainstage'], null, section); const row2 = createElement('div', ['row'], null, container2); const colslider = createElement('div', ['col', 'slidercontainer', 'rotation'], null, row2); - - - //const col2 = createElement('div', ['col'], null, row2); - const sliderComponent = createElement('div', ['slider'], null, colslider); + const sliderComponent = createElement('div', ['slider', 'btnanimation'], null, colslider); slides.map((slideData, index) => { const slide = createElement('div', ['slide'], null, sliderComponent); const outer = createElement('outer', ['outer'], null, slide); diff --git a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss index e762738..ab9a3a5 100644 --- a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss +++ b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss @@ -698,15 +698,23 @@ section.marketingheader{ .btn{ margin-top:0.4em; } - + &.ishovered .slider-tabs li.active button.btn::before{ + animation-play-state: paused; + } + &.btnanimation{ + .slider-tabs{ + li.active{ + button.btn::before{ + animation: fillgrey 7s linear forwards; + } + } + } + } .slider-tabs{ li:first-child:last-child{ display:none; } li.active{ - button.btn::before{ - animation: fillgrey 7s; - } button.btn{ background-blend-mode: overlay; } @@ -722,7 +730,7 @@ section.marketingheader{ width:0; background-color:var(--theme-grey-light); content: ""; - z-index:-1; + z-index:0; height:100%; position:absolute; top:0; @@ -730,7 +738,6 @@ section.marketingheader{ right:0; left:0; right:0; - //border-radius: var(--border-radius-lg); display:block; background-blend-mode: multiply; } diff --git a/gfi-ihk-2024/stories/sections/slider/slider.js b/gfi-ihk-2024/stories/sections/slider/slider.js index 29143e3..8b327bb 100644 --- a/gfi-ihk-2024/stories/sections/slider/slider.js +++ b/gfi-ihk-2024/stories/sections/slider/slider.js @@ -114,8 +114,11 @@ class IHKSlider { this.slides.each(function (i) { const s = $(this); const li = $('
').appendTo(tabsWrapper); - - $('').addClass('btn').appendTo(li).text(s.data('title') ? s.data('title') : i + 1); + + var button = $('').addClass('btn').appendTo(li); + const span = $('').appendTo(button); + + span.text(s.data('title') ? s.data('title') : i + 1); }); this.tabs = tabsWrapper.children(); @@ -269,10 +272,12 @@ class IHKSlider { this.section.on('mouseenter', () => { this.isHovered = true; clearTimeout(this.autoplayTimeout); + this.section.removeClass("btnanimation"); }) this.section.on('mouseleave', () => { this.isHovered = false; this.handleAutoplay(); + this.section.addClass("btnanimation"); }) this.initScrollCheck(); diff --git a/gfi-ihk-2024/stories/sections/slider/slider.scss b/gfi-ihk-2024/stories/sections/slider/slider.scss index 1f67237..5906235 100644 --- a/gfi-ihk-2024/stories/sections/slider/slider.scss +++ b/gfi-ihk-2024/stories/sections/slider/slider.scss @@ -342,7 +342,10 @@ --button-hover-shadow-opacity: 0.4; margin: 5px; font-size: var(--font-size-h4); - + span{ + position:relative; + z-index:2; + } @media(max-width: 767px) { margin: 4px; }