Buttonanimation

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);

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;
         }

gfi-ihk-2024/stories/sections/slider/slider.js

@@ -114,8 +114,11 @@ class IHKSlider {
     this.slides.each(function (i) {
       const s = $(this);
       const li = $('<li/>').appendTo(tabsWrapper);
-
-      $('<button />').addClass('btn').appendTo(li).text(s.data('title') ? s.data('title') : i + 1);
+      
+      var button = $('<button />').addClass('btn').appendTo(li);
+      const span = $('<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();

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;
       }