diff --git a/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js b/gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js
index e929e96..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);
@@ -147,13 +144,13 @@ export const createMarketingHeader =
if (type === 'infoteaser') {
const col3 = createElement('div', ['col'], null, row2);
- //const teasers = createMiniTeaser({teasers.type: 'standard'});
- //col3.appendChild(teasers);
-
teasers.map((t, i) => {
if (i < maxItems) {
var typ = 'standard';
- if (i == 0 && t.type == 'infoteaser') typ = 'infoteaser';
+ if (i == 0 && t.type == 'infoteaser'){
+ typ = 'infoteaser';
+ section.classList.add('miniinfoteaser');
+ }
const col4 = createElement('div', ['mt'], null, col3);
const tea = createMiniTeaser({
type : typ,
@@ -162,55 +159,6 @@ export const createMarketingHeader =
}
})
}
- /*
- const hasImage = imageSrc && imageSrc.length > 0;
- const stage = createElement('div', ['participation', 'participation-stage'], null, section);
- const container2 = createElement('div', ['container'], null, stage);
- const row2 = createElement('div', ['row'], null, container2);
- const col2 = createElement('div', ['col'], null, row2);
- const tb2 = createElement('div', ['text-box'], null, col2);
-
- if (backgroundImage && backgroundImage.length > 0) {
- //section.content('style=background: red;');
- stage.style = 'background-image: url(' + backgroundImage + ');';
- stage.classList.add('background-image');
- }
-
- if (isFirstElement) {
- stage.classList.add('first-element');
- }
-
- if (kicker && kicker.length > 0) {
- createElement('p', ['kicker'], kicker, tb2);
- }
- if (showProgress) {
- tb2.appendChild(createProgressBar({progress}));
- }
- createElement('h1', ['like-h2'], headline, tb2);
- createElement('p', [], copy, tb2);
- if (moreCta) {
- const more = createElement('a', [], moreCta.label, tb2);
- more.href = moreCta.link;
- more.target = moreCta.target;
- }
- if (buttonCta) {
- const button2 = createButton({
- elementType: 'a',
- link: buttonCta.link,
- color: 'white',
- label: buttonCta.label,
- iconPosition: 'icon-right',
- icon: 'small-arrow-right-simple',
- });
- tb2.appendChild(button2);
- }
-
- if (hasImage) {
- stage.classList.add('image-stage');
- const ib2 = createElement('div', ['image-box'], null, col2);
- createImage(imageSrc, 1080, 648, 'Beteiligung', [], ib2);
- }
- */
return section;
}
\ No newline at end of file
diff --git a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss
index 623762b..ab9a3a5 100644
--- a/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss
+++ b/gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss
@@ -2,6 +2,19 @@
@import '../../_global/styles/vars';
section.marketingheader{
margin-top:0;
+ &.miniinfoteaser{
+ .kicker{
+ color:var(--theme-color-secondary);
+ }
+ .mini-teaser{
+ .category{
+ color:var(--theme-color-secondary);
+ }
+ }
+ .text-only .kicker{
+ color:white;
+ }
+ }
.search {
position: relative;
overflow: hidden;
@@ -685,11 +698,50 @@ 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{
+ background-blend-mode: overlay;
+ }
+ }
+ li{
+ button.btn{
+ position: relative;
+ border-radius: var(--border-radius-lg);
+ overflow:hidden;
+
+ }
+ button.btn::before{
+ width:0;
+ background-color:var(--theme-grey-light);
+ content: "";
+ z-index:0;
+ height:100%;
+ position:absolute;
+ top:0;
+ bottom:0;
+ right:0;
+ left:0;
+ right:0;
+ display:block;
+ background-blend-mode: multiply;
+ }
+ }
}
.slide.text-only.current{
background: none;
@@ -705,7 +757,7 @@ section.marketingheader{
padding: 30px 36px 24px 36px;
display: flex;
flex-flow: column;
- justify-content: end;
+ justify-content: center;
min-width: 324px;
&:not(:first-child)::before {
background-color: var(--theme-color-primary-dimmed-04);
@@ -746,9 +798,6 @@ section.marketingheader{
.text-box:not(:first-child)::before{
display: none;
}
- .text-box .btn{
- display:none;
- }
.image-box{
order: 0;
height:auto;
@@ -819,3 +868,7 @@ section.marketingheader{
}
}
}
+@keyframes fillgrey {
+ 0%{width:0;}
+ 100%{width:100%}
+}
\ No newline at end of file
diff --git a/gfi-ihk-2024/stories/sections/slider/slider.js b/gfi-ihk-2024/stories/sections/slider/slider.js
index 11ede19..0688faf 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;
}