feat: compare animation
This commit is contained in:
parent
188059a311
commit
b6ebf5d3ea
2 changed files with 63 additions and 11 deletions
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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" }}
|
{{ $image := resources.Get "images/crypte_comparaison_01_judee.jpg" }}
|
||||||
<img class="compare-judee" src="{{ $image.RelPermalink }}" />
|
<img class="" src="{{ $image.RelPermalink }}" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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>
|
<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" }}
|
{{ $image := resources.Get "images/crypte_comparaison_02_judee.jpg" }}
|
||||||
<img class="compare-judee" src="{{ $image.RelPermalink }}" />
|
<img class="" src="{{ $image.RelPermalink }}" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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>
|
<figcaption>Comparaison crypte vers l'ouest</figcaption>
|
||||||
</figure>
|
</figure>
|
||||||
</figure>
|
</figure>
|
||||||
|
|
Loading…
Reference in a new issue