etoiledebethleem/website
5
1
Fork 1
Code Issues 6 Pull requests 1 Projects 1 Releases Packages Activity Actions

feat: compare animation

Browse source
This commit is contained in:
Matthieu Bessat 2023-05-27 17:28:51 +02:00
parent 188059a311
commit b6ebf5d3ea
2 changed files with 63 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
assets/sass/landing.scss
View file

@ -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 { .history-summary {
display: grid; display: grid;
grid-template-columns: 3fr 1fr; grid-template-columns: 3fr 1fr;
@ -125,3 +163,4 @@
border-bottom: 1px solid rgba(1, 1, 1, 0.2); border-bottom: 1px solid rgba(1, 1, 1, 0.2);
} }
} }

35
layouts/landing-matthieu/list.html
View file

@ -61,25 +61,38 @@
<section class="compare-section"> <section class="compare-section">
<div class="page-container"> <div class="page-container">
<h2>Un petit bout de palestine en Normandie...</h2> <h2>Un petit bout de palestine en Normandie...</h2>
<div class="compare-items"> <div class="compare-items compare-items-dynamic">
<div class="compare-item"> <div class="compare-item compare-east">
<figure> <figure>
{{ $image := resources.Get "images/crypte_comparaison_01_aubevoye.jpg" }} <div class="compare-duet">
<img class="compare-aubevoye" src="{{ $image.RelPermalink }}" /> <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" }} <div class="compare-shown">
<img class="compare-judee" src="{{ $image.RelPermalink }}" /> {{ $image := resources.Get "images/crypte_comparaison_01_aubevoye.jpg" }}
<img class="" src="{{ $image.RelPermalink }}" />
</div>
</div>
<figcaption>Comparaison crypte vers l'est</figcaption> <figcaption>Comparaison crypte vers l'est</figcaption>
</figure> </figure>
</div> </div>
<div class="compare-item"> <div class="compare-item compare-west">
<figure> <figure>
{{ $image := resources.Get "images/crypte_comparaison_02_aubevoye.jpg" }} <div class="compare-duet">
<img class="compare-aubevoye" src="{{ $image.RelPermalink }}" /> <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" }} <div class="compare-shown">
<img class="compare-judee" src="{{ $image.RelPermalink }}" /> {{ $image := resources.Get "images/crypte_comparaison_02_aubevoye.jpg" }}
<img class="" src="{{ $image.RelPermalink }}" />
</div>
</div>
<figcaption>Comparaison crypte vers l'ouest</figcaption> <figcaption>Comparaison crypte vers l'ouest</figcaption>
</figure> </figure>
</figure> </figure>