[FEATURE] Hero Image, new animation styles (#195)

* [FEATURE] Hero Image, new animation styles * [FIX] update description
t3kit · May 5, 2017 · 2631abb · 2631abb
1 parent 4ce7556
commit 2631abb
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 6 deletions.
diff --git a/Configuration/ContentElements/HeroImage.pagets b/Configuration/ContentElements/HeroImage.pagets
@@ -32,5 +32,7 @@ TCEFORM.tt_content.pi_flexform.heroImage.sDEF.animationStyle {
         1 = LLL:EXT:theme_t3kit/Resources/Private/Language/ContentElements.xlf:heroImage.flexform.animationStyle_1
         2 = LLL:EXT:theme_t3kit/Resources/Private/Language/ContentElements.xlf:heroImage.flexform.animationStyle_2
         3 = LLL:EXT:theme_t3kit/Resources/Private/Language/ContentElements.xlf:heroImage.flexform.animationStyle_3
+        4 = LLL:EXT:theme_t3kit/Resources/Private/Language/ContentElements.xlf:heroImage.flexform.animationStyle_4
+        5 = LLL:EXT:theme_t3kit/Resources/Private/Language/ContentElements.xlf:heroImage.flexform.animationStyle_5
     }
 }
diff --git a/Resources/Private/Language/ContentElements.xlf b/Resources/Private/Language/ContentElements.xlf
@@ -310,13 +310,19 @@
                 <source>Disable</source>
             </trans-unit>
             <trans-unit id="heroImage.flexform.animationStyle_1">
-                <source>Animation style 1</source>
+                <source>Fade In Down</source>
             </trans-unit>
             <trans-unit id="heroImage.flexform.animationStyle_2">
-                <source>Animation style 2</source>
+                <source>Fade In</source>
             </trans-unit>
             <trans-unit id="heroImage.flexform.animationStyle_3">
-                <source>Animation style 3</source>
+                <source>Fade In Up</source>
+            </trans-unit>
+			<trans-unit id="heroImage.flexform.animationStyle_4">
+                <source>Fade from up and down, style 1</source>
+            </trans-unit>
+            <trans-unit id="heroImage.flexform.animationStyle_5">
+                <source>Fade from up and down, style 2</source>
             </trans-unit>
 
             <trans-unit id="logoCarousel.title">

diff --git a/Resources/Private/Templates/ContentElements/HeroImage.html b/Resources/Private/Templates/ContentElements/HeroImage.html
@@ -9,13 +9,13 @@
 			<div class="hero-image__caption-wrp {f:if(condition: '{settings.horizontalAlignment} == 0', then: '_left-align')}{f:if(condition: '{settings.horizontalAlignment} == 1', then: '_center-align')}{f:if(condition: '{settings.horizontalAlignment} == 2', then: '_right-align')}" style="height: {settings.elementHeight}px">
 				<div class="hero-image__caption {f:if(condition: '{settings.animationStyle} == 0', then: '', else: '_caption-animated-{settings.animationStyle}')} {f:if(condition: '{settings.verticalAlignment} == 0', then: '_top')}{f:if(condition: '{settings.verticalAlignment} == 2', then: '_bottom')}">
 					<f:if condition="{data.header}">
-						<h2 class="hero-image__caption-header">{data.header}</h2>
+						<h2 class="hero-image__caption-header" data-header-content='{data.header}'>{data.header}</h2>
 					</f:if>
 					<f:if condition="{data.bodytext}">
-						<h3 class="hero-image__caption-subheader">{data.bodytext}</h3>
+						<h3 class="hero-image__caption-subheader" data-subheader-content='{data.bodytext}'>{data.bodytext}</h3>
 					</f:if>
 					<f:if condition="{settings.elementText}">
-						<p class="hero-image__caption-p">{settings.elementText}</p>
+						<p class="hero-image__caption-p" data-text-content='{settings.elementText}'>{settings.elementText}</p>
 					</f:if>
 					<f:if condition="{data.header_link}">
 						<div class="hero-image__caption-link ">

diff --git a/felayout_t3kit/dev/styles/main/contentElements/heroImage.less b/felayout_t3kit/dev/styles/main/contentElements/heroImage.less
@@ -209,3 +209,107 @@
     -webkit-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
 }
+
+//--------------------------------------------------//
+// animation style 4 -------------------------------//
+//--------------------------------------------------//
+
+.hero-image__caption._caption-animated-4 > *:not(.hero-image__caption-link) {
+    position: relative;
+    color: transparent;
+    overflow: hidden;
+
+    &:after {
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        color: @main-body-bg;
+        transition: all 0.6s ease-out;
+        transform: translateY(-100%);
+        opacity: 0;
+    }
+}
+
+.hero-image__caption._caption-animated-4 .hero-image__caption-header:after {
+    content: attr(data-header-content);
+    transition-delay: 1s;
+}
+
+.hero-image__caption._caption-animated-4 .hero-image__caption-subheader:after {
+    content: attr(data-subheader-content);
+    transition-delay: 0.8s;
+}
+
+.hero-image__caption._caption-animated-4 .hero-image__caption-p:after {
+    content: attr(data-text-content);
+    transition-delay: 0.6s;
+}
+
+.hero-image__caption._caption-animated-4 .hero-image__caption-link {
+    transition: all 1s ease-out 0.6s;
+    opacity: 0;
+    transform: translateY(40px);
+}
+
+.swiper-slide-active .hero-image__caption._caption-animated-4 > *:not(.hero-image__caption-link):after {
+    transform: translateY(0);
+    opacity: 1;
+}
+
+.swiper-slide-active .hero-image__caption._caption-animated-4 .hero-image__caption-link {
+    transform: translateY(0);
+    opacity: 1;
+}
+
+.hero-image._animated .hero-image__caption._caption-animated-4 > *:not(.hero-image__caption-link):after {
+    transform: translateY(0);
+    opacity: 1;
+}
+
+.hero-image._animated .hero-image__caption._caption-animated-4 .hero-image__caption-link {
+    transform: translateY(0);
+    opacity: 1;
+}
+
+//--------------------------------------------------//
+// animation style 5 -------------------------------//
+//--------------------------------------------------//
+
+.hero-image__caption._caption-animated-5 > * {
+    transition: all 0.5s ease-in-out;
+    opacity: 0;
+}
+
+.hero-image__caption._caption-animated-5 .hero-image__caption-header {
+    transition-delay: 0.9s;
+    transform: translateY(-40px);
+}
+
+.hero-image__caption._caption-animated-5 .hero-image__caption-subheader {
+    transition-delay: 0.7s;
+    transform: translateY(-40px);
+}
+
+.hero-image__caption._caption-animated-5 .hero-image__caption-p {
+    transform: translateY(40px);
+    transition-delay: 0.7s;
+}
+
+.hero-image__caption._caption-animated-5 .hero-image__caption-link {
+    transition-delay: 0.9s;
+    transform: translateY(40px);
+}
+
+.hero-image._animated,
+.swiper-slide-active {
+    .hero-image__caption._caption-animated-5 .hero-image__caption-p,
+    .hero-image__caption._caption-animated-5 .hero-image__caption-link,
+    .hero-image__caption._caption-animated-5 .hero-image__caption-subheader,
+    .hero-image__caption._caption-animated-5 .hero-image__caption-header {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}