wip #5812 @2:00

diff --git a/wp-content/themes/sycomore-fondation/resources/styles/partials/home-carousel.sass b/wp-content/themes/sycomore-fondation/resources/styles/partials/home-carousel.sass
index c4822326b2bd8f15e3b3ddf22b11d4407fbc32d5..e6a62953f1c1b84b4ed13a4ad6f0b83c306f3085 100644 (file)
--- a/wp-content/themes/sycomore-fondation/resources/styles/partials/home-carousel.sass
+++ b/wp-content/themes/sycomore-fondation/resources/styles/partials/home-carousel.sass
@@ -1,7 +1,6 @@
 .home-carousel
   position: relative
-  height: 798px //87vh
-  //padding-bottom: 42.25%
+  height: 798px
   overflow: hidden
   +screen-size(small-desktop, 'max')
     display: none
@@ -17,23 +16,13 @@
       &.prev
         .leftside
           height: 0
+        .rightside .overlay
+          height: 0
       &.next
         z-index: 1
       &.active
         height: 100%
         z-index: 2
-        [class*="side"]
-          .overlay,
-          .thumbnail
-            height: 100%
-
-          .thumbnail
-            position: relative
-
-          .text
-            opacity: 1
-            transition: opacity 750ms cubic-bezier(0.77, 0, 0.175, 1) 0s, top 1s
-            top: 0
 
       .leftside,
       .rightside
@@ -43,11 +32,13 @@
 
       .overlay
         width: calc(100% + ((100vw - 1344px) / 2) )
+        height: 100%
         +screen-size('desktop', 'max')
           width: 100%
 
         position: absolute
         left: 0
+        top: 0
         transition: all .9s cubic-bezier(.7, 0, .2, 1)
         img
           object-fit: cover
@@ -79,10 +70,17 @@
             left: var(--left)
             transition: all 1s
 
+        .rightside.active
+          .thumbnail
+            position: relative
+
+          .text
+            opacity: 1
+            top: 0
+
         &.active
           .thumbnail
             img
-
               transition: all 1s
               bottom: calc(var(--bottom) - 39px)
 
@@ -96,9 +94,8 @@
           padding-bottom: 137px
           padding-left: calc(8.66% * 2)
           position: relative
-          transition: opacity 750ms cubic-bezier(0.77, 0, 0.175, 1) 0s, top 1s
+          transition: opacity .5s cubic-bezier(0.77, 0, 0.175, 1) 0s
           opacity: 0
-          top: 50px
           *
             color: #ffffff
           p
@@ -108,6 +105,18 @@
             margin-bottom: 30px
             font-size: var(--step-3) !important
 
+        &.active
+          .text
+            opacity: 1
+            animation-name: fade-in
+            animation-duration: 1s
+            animation-timing-function: ease-in-out
+
+        &:not(.active)
+          .text
+            animation-name: fade-out
+            animation-duration: 1s
+            animation-timing-function: ease-in-out
 
       &.next
         .leftside
@@ -121,19 +130,20 @@
             bottom: 0
 
 
-      &:not(.active)
-        .text
-          animation-name: anime
-          animation-duration: .8s
-          animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1)
 
-@keyframes anime
+@keyframes fade-out
   0%
-    top: 0
+    transform: translateY(0)
   50%
-    top: -1.25vw
+    transform: translateY(-40px)
+  100%
+    transform: translateY(40px)
+
+@keyframes fade-in
+  0%
+    transform: translateY(40px)
   100%
-    top: 1.25vw
+    transform: translateY(0)
 
 @keyframes anime-thumb
   0%

diff --git a/wp-content/themes/sycomore-fondation/resources/views/widgets/carousel-home.blade.php b/wp-content/themes/sycomore-fondation/resources/views/widgets/carousel-home.blade.php
index ad76029437fee193a77e34e7a1669a388f609b2e..1c7946f4c12508431800694ed841684e9e258278 100644 (file)
--- a/wp-content/themes/sycomore-fondation/resources/views/widgets/carousel-home.blade.php
+++ b/wp-content/themes/sycomore-fondation/resources/views/widgets/carousel-home.blade.php
@@ -12,7 +12,7 @@
           </div>
         @endif
       </div>
-      <div class="rightside">
+      <div class="rightside {{ $key === 1 ? 'active' : '' }}">
         <div class="overlay overlayside"></div>
         <div class="text">
           <h1 class="text-3xl">{{ $slide['title'] }}</h1>