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); - - $('