From 3b7d7f2a6291dedf8a8e1d51611fe6cc18154314 Mon Sep 17 00:00:00 2001
From: Matthieu Bessat <mail@matthieubessat.fr>
Date: Sat, 27 May 2023 17:28:51 +0200
Subject: [PATCH] feat: compare animation

---
 assets/sass/landing.scss           | 39 ++++++++++++++++++++++++++++++
 layouts/landing-matthieu/list.html | 35 ++++++++++++++++++---------
 2 files changed, 63 insertions(+), 11 deletions(-)

diff --git a/assets/sass/landing.scss b/assets/sass/landing.scss
index 6c9c72c..6304526 100644
--- a/assets/sass/landing.scss
+++ b/assets/sass/landing.scss
@@ -106,8 +106,46 @@
         }
     }
 
+    @keyframes compare-anim {
+        0% {
+            clip-path: inset(100% 100% 100% 0%);
+        }
+        100% {
+            clip-path: inset(100% 100% 100% 100%);
+        }
+    }
+    .compare-items-dynamic {
+        .compare-duet {
+            overflow: hidden;
+            position: relative;
+
+            .compare-hidden {
+                position: absolute;
+                top: 0;
+                left: 0;
+                overflow: hidden;
+                clip-path: inset(100% 100% 100% 0%);
+            }
+        }
+
+        .compare-duet:hover {
+            .compare-hidden {
+                animation: compare-anim 2s cubic-bezier(.86,0,.07,1);
+                animation-fill-mode: forwards;
+            }
+        }
+    }
 }
 
+@media (max-width: $sm-breakpoint) {
+    .compare-section {
+        .compare-items {
+            grid-template-columns: 1fr;
+        }
+    }
+}
+
+
 .history-summary {
     display: grid;
     grid-template-columns: 3fr 1fr;
@@ -125,3 +163,4 @@
         border-bottom: 1px solid rgba(1, 1, 1, 0.2);
     }
 }
+
diff --git a/layouts/landing-matthieu/list.html b/layouts/landing-matthieu/list.html
index 90d0754..1a56637 100644
--- a/layouts/landing-matthieu/list.html
+++ b/layouts/landing-matthieu/list.html
@@ -61,25 +61,38 @@
         <section class="compare-section">
             <div class="page-container">
                 <h2>Un petit bout de palestine en Normandie...</h2>
-                <div class="compare-items">
-                    <div class="compare-item">
+                <div class="compare-items compare-items-dynamic">
+                    <div class="compare-item compare-east">
                         <figure>
-                            {{ $image := resources.Get "images/crypte_comparaison_01_aubevoye.jpg" }}
-                            <img class="compare-aubevoye" src="{{ $image.RelPermalink }}" />
+                            <div class="compare-duet">
+                                <div class="compare-hidden">
+                                    {{ $image := resources.Get "images/crypte_comparaison_01_judee.jpg" }}
+                                    <img class="" src="{{ $image.RelPermalink }}" />
+                                </div>
 
-                            {{ $image := resources.Get "images/crypte_comparaison_01_judee.jpg" }}
-                            <img class="compare-judee" src="{{ $image.RelPermalink }}" />
+                                <div class="compare-shown">
+                                    {{ $image := resources.Get "images/crypte_comparaison_01_aubevoye.jpg" }}
+                                    <img class="" src="{{ $image.RelPermalink }}" />
+                                </div>
+                            </div>
 
                             <figcaption>Comparaison crypte vers l'est</figcaption>
                         </figure>
                     </div>
-                    <div class="compare-item">
+                    <div class="compare-item compare-west">
                         <figure>
-                            {{ $image := resources.Get "images/crypte_comparaison_02_aubevoye.jpg" }}
-                            <img class="compare-aubevoye" src="{{ $image.RelPermalink }}" />
+                            <div class="compare-duet">
+                                <div class="compare-hidden">
+                                    {{ $image := resources.Get "images/crypte_comparaison_02_judee.jpg" }}
+                                    <img class="" src="{{ $image.RelPermalink }}" />
+                                </div>
 
-                            {{ $image := resources.Get "images/crypte_comparaison_02_judee.jpg" }}
-                            <img class="compare-judee" src="{{ $image.RelPermalink }}" />
+                                <div class="compare-shown">
+                                    {{ $image := resources.Get "images/crypte_comparaison_02_aubevoye.jpg" }}
+                                    <img class="" src="{{ $image.RelPermalink }}" />
+                                </div>
+
+                            </div>
                             <figcaption>Comparaison crypte vers l'ouest</figcaption>
                         </figure>
                         </figure>
-- 
2.43.4